<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.1.3 (458534)"/><meta name="author" content="流星"/><meta name="created" content="2020-11-02 11:30:00 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-11-02 12:33:42 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>ArrayBuffer</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ArrayBuffer 对象、 TypedArray 视图和 DataView 视图是 JavaScript 操作二进制数据的一个接口。它们都是以数组的语法处理二进制数据，所以统称为二进制数组。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">(1) ArrayBuffer 对象:代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">(2) TypedArray 视图:共包括9种类型的视图，比如 Uint8Array (无符号8位整数)数组视图, Int16Array (16位整数)数组视图, Float32Array (32位浮点数)数组视图等等。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">(3) DataView 视图:可以自定义复合格式的视图，比如第一个字节是Uint8(无符号8位整数)、第二、三个字节是 Int16(16位整数)、第四个字节开始是 Float32(32位浮点数)等等，此外还可以自定义字节序。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">简单说， ArrayBuffer 对象代表原始的二进制数据，TypedArray视图用 来读写简单类型的二进制数据， DataView 视图用来读写复杂类型的二 进制数据。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">ArrayBuffer 对象</h4>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">概述</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ArrayBuffer 对象代表储存二进制数据的一段内存，它不能直接读 写，只能通过视图( TypedArray 视图和 DataView 视图)来读写，视 图的作用是以指定格式解读二进制数据。<br/>
ArrayBuffer 也是一个构造函数，可以分配一段可以存放数据的连续 内存区域。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">const buf = new ArrayBuffer(32);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">上面代码生成了一段32字节的内存区域，每个字节的值默认都是0。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">ArrayBuffer.prototype.byteLength</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ArrayBuffer 实例的 byteLength 属性，返回所分配的内存区域的字 节长度。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">32</span>);
buffer.byteLength
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 32</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//如果要分配的内存区域很大，有可能分配失败(因为没有那么多的连续</span>
空余内存)，所以有必要检查是否分配成功。
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">if</span> (buffer.byteLength === n) { <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 成功</span>
} <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">else</span> { <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 失败</span>
}
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">ArrayBuffer.prototype.slice()</h5>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> newBuffer = buffer.slice(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">上面代码拷贝 buffer 对象的前3个字节(从0开始，到第3个字节前面 结束)，生成一个新的 ArrayBuffer 对象。 slice 方法其实包含两步，第一步是先分配一段新内存，第二步是将原来那个 ArrayBuffer 对象拷贝过去。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><em style="line-height: 160%; box-sizing: content-box; font-style: italic;">除了 slice 方法， ArrayBuffer 对象不提供任何直接读写内存的方 法，只允许在其上方建立视图，然后通过视图读写。</em></p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">ArrayBuffer.isView()</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ArrayBuffer 有一个静态方法 isView ，返回一个布尔值，表示参数 是否为 ArrayBuffer 的视图实例。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>.isView(buffer) <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// false</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int32Array</span>(buffer);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>.isView(v) <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// true</span>
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">TypedArray视图</h4>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">概述</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">目前，TypedArray视图一共包括9种类型，每一种视图都是一种构造函数。<br/>
1.Int8Array :8位有符号整数，长度1个字节。<br/>
2.Uint8Array :8位无符号整数，长度1个字节。<br/>
3.Uint8ClampedArray :8位无符号整数，长度1个字节，溢出处理不同。<br/>
4.Int16Array :16位有符号整数，长度2个字节。<br/>
5.Uint16Array :16位无符号整数，长度2个字节。<br/>
6.Int32Array :32位有符号整数，长度4个字节。<br/>
7.Uint32Array :32位无符号整数，长度4个字节。<br/>
8.Float32Array :32位浮点数，长度4个字节。<br/>
9.Float64Array :64位浮点数，长度8个字节。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">普通数组与TypedArray数组的差异主要在以下方面。<br/>
1.TypedArray数组的所有成员，都是同一种类型。<br/>
2.TypedArray数组的成员是连续的，不会有空位。<br/>
3.TypedArray数组成员的默认值为0。比如， new Array(10) 返回一<br/>
个普通数组，里面没有任何成员，只是10个空位; newUint8Array(10) 返回一个TypedArray数组，里面10个成员都是0。<br/>
4.TypedArray数组只是一层视图，本身不储存数据，它的数据都储存在<br/>
底层的 ArrayBuffer 对象之中，要获取底层对象必须使用 buffer 属性。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">构造函数</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">TypedArray数组提供9种构造函数，用来生成相应类型的数组实例。<br/>
构造函数有多种用法。<br/>
<strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">(1)TypedArray(buffer, byteOffset=0, length?)</strong><br/>
同一个 ArrayBuffer 对象之上，可以根据不同的数据类型，建立多个 视图。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 创建一个8字节的ArrayBuffer</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 创建一个指向b的Int32视图，开始于字节0，直到缓冲区的末尾</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v1 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int32Array</span>(b);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 创建一个指向b的Uint8视图，开始于字节2，直到缓冲区的末尾</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v2 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(b, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 创建一个指向b的Int16视图，开始于字节2，长度为2</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v3 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>(b, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">视图的构造函数可以接受三个参数:<br/>
第一个参数(必需):视图对应的底层 ArrayBuffer 对象。<br/>
第二个参数(可选):视图开始的字节序号，默认从0开始。<br/>
第三个参数(可选):视图包含的数据个数，默认直到本段内存区 域结束。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注意， byteOffset 必须与所要建立的数据类型一致，否则会报错。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> i16 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>(buffer, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//因为，带符号的16位整数需要两个字节，所以 byteOffset 参数必须能够被2整除。</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">(2)TypedArray(length)</strong><br/>
视图还可以不通过 ArrayBuffer 对象，直接分配内存而生成。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> f64a = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Float64Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
f64a[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">10</span>;
f64a[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">20</span>;
f64a[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>] = f64a[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] + f64a[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>];
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">上面代码生成一个8个成员的 Float64Array 数组(共64字节)，然后 依次对每个成员赋值。这时，视图构造函数的参数就是成员的个数。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">(3)TypedArray(typedArray)</strong><br/>
TypedArray数组的构造函数，可以接受另一个TypedArray实例作为参<br/>
数。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> typedArray = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int8Array</span>(<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>));

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//注意，此时生成的新数组，只是复制了参数数组的值，对应的底层内存是不一样的。新数组会开辟一段新的内存储存数据，不会在原数组的内存之上建立视图。</span>

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> x = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int8Array</span>([<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>]);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> y = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int8Array</span>(x);
x[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1</span>
y[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1</span>
x[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>;
y[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">(4)TypedArray(arrayLikeObject)</strong><br/>
构造函数的参数也可以是一个普通数组，然后直接生成TypedArray实例</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> typedArray = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>([<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>]);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//注意，这时TypedArray视图会重新开辟内存，不会在原数组的内存上建 立视图。</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//TypedArray数组也可以转换回普通数组。</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> normalArray = [...typedArray];
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// or</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> normalArray = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Array</span>.from(typedArray);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// or</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> normalArray =
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Array</span>.prototype.slice.call(typedArray);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">普通数组的操作方法和属性，对TypedArray数组完全适用。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">注意，TypedArray数组没有 concat 方法。如果想要合并多个 TypedArray数组，可以用下面这个函数。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">concatenate</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">resultConstructor, ...arrays</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> totalLength = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>;
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> arr <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">of</span> arrays) {
    totalLength += arr.length;
  }
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> result = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> resultConstructor(totalLength);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> offset = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>;
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> arr <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">of</span> arrays) {
    result.set(arr, offset);
    offset += arr.length;
  }
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> result;
}
concatenate(<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>, <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>),
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>))
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Uint8Array [1, 2, 3, 4]</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">TypedArray数组与普通数组一样，部署了Iterator接口，所以可以被遍历。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> ui8 = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> byte <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">of</span> ui8) {
  <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(byte);
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 0 // 1 // 2</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">字节序</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">字节序指的是数值在内存中的表示方式。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">16</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> int32View = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int32Array</span>(buffer);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> i = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>; i &lt; int32View.length; i++) {
  int32View[i] = i * <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>;
}
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">上面代码生成一个16字节的 ArrayBuffer 对象，然后在它的基础上， 建立了一个32位整数的视图。由于每个32位整数占据4个字节，所以一共 可以写入4个整数，依次为0，2，4，6。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果在这段数据上接着建立一个16位整数的视图，则可以读出完全不一 样的结果。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> int16View = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>(buffer);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> i = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>; i &lt; int16View.length; i++) {
  <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"Entry "</span> + i + <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">": "</span> + int16View[i]);
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 0: 0</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 1: 0</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 2: 2</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 3: 0</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 4: 4</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 5: 0</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 6: 6</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Entry 7: 0</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">由于每个16位整数占据2个字节，所以整个 ArrayBuffer 对象现在分成 8段<br/>
由于x86体系的计算机都采用小端字节序(little endian)， 相对重要的字节排在后面的内存地址，相对不重要字节排在前面的内存 地址，所以就得到了上面的结果。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">比如，一个占据四个字节的16进制数 0x12345678 ，决定其大小的最重 要的字节是“12”，最不重要的是“78”。小端字节序将最不重要的字节排 在前面，储存顺序就是 78563412 ;大端字节序则完全相反，将最重要 的字节排在前面，储存顺序就是 12345678 。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">下面是另一个例子。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 假定某段buffer包含如下字节 [0x02, 0x01, 0x03, 0x07]</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v1 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(buffer);
v1[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>;
v1[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>;
v1[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>;
v1[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">7</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> uInt16View = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>(buffer);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 计算机采用小端字节序</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 所以头两个字节等于258</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">if</span> (uInt16View[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] === <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">258</span>) {
  <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'OK'</span>); <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// "OK"</span>
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 赋值运算</span>
uInt16View[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">255</span>; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 字节变为[0xFF, 0x00, 0x03, 0x07]</span>
uInt16View[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0xff05</span>; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 字节变为[0x05, 0xFF, 0x03, 0x07]</span>
uInt16View[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x0210</span>; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 字节变为[0x05, 0xFF, 0x10, 0x02]</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">下面的函数可以用来判断，当前视图是小端字节序，还是大端字节序。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> BIG_ENDIAN = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Symbol</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'BIG_ENDIAN'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> LITTLE_ENDIAN = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Symbol</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'LITTLE_ENDIAN'</span>);
<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">getPlatformEndianness</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> arr32 = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint32Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x12345678</span>);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> arr8 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(arr32.buffer);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">switch</span> ((arr8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>]*<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x1000000</span>) + (arr8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>]*<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x10000</span>) +
(arr8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>]*<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x100</span>) + (arr8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>])) {
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">case</span> <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x12345678</span>:
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> BIG_ENDIAN;
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">case</span> <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0x78563412</span>:
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> LITTLE_ENDIAN;
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span>:
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">throw</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Error</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'Unknown endianness'</span>);
  }
}
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">BYTES_PER_ELEMENT属性</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">每一种视图的构造函数，都有一个 BYTES_PER_ELEMENT 属性，表示这 种数据类型占据的字节数。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int8Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int32Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 4</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint32Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 4</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Float32Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 4</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Float64Array</span>.BYTES_PER_ELEMENT <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 8</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">这个属性在TypedArray实例上也能获取，即有 TypedArray.prototype.BYTES_PER_ELEMENT 。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">ArrayBuffer与字符串的互相转换</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">ArrayBuffer 转为字符串，或者字符串转为 ArrayBuffer ，有一个前 提，即字符串的编码方法是确定的。假定字符串采用 UTF-16 编码 (JavaScript 的内部编码方式)，可以自己编写转换函数。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ArrayBuffer 转为字符串，参数为 ArrayBuffer 对象 function ab2str(buf) {</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 注意，如果是大型二进制数组，为了避免溢出，</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 必须一个一个字符地转</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">String</span>.fromCharCode.apply(<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">null</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>(buf));
}
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 字符串转为 ArrayBuffer 对象，参数为字符串 function str2ab(str) {</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buf = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(str.length * <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>); <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 每个字符 占用2个字节</span>
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bufView = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>(buf);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">for</span> (<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> i = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, strLen = str.length; i &lt; strLen; i++)
{
    bufView[i] = str.charCodeAt(i);
  }
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> buf; }
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">溢出</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">不同的视图类型，所能容纳的数值范围是确定的。超出这个范围，就会 出现溢出。<br/>
TypedArray数组的溢出处理规则，简单来说，就是抛弃溢出的位，然后 按照视图类型进行解释。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> uint8 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
uint8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">256</span>;
uint8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 0</span>
uint8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">-1</span>;
uint8[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 255</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">一个简单转换规则，可以这样表示。<br/>
正向溢出(overflow):当输入值大于当前数据类型的最大值，结果 等于当前数据类型的最小值加上余值，再减去1。<br/>
负向溢出(underflow):当输入值小于当前数据类型的最小值，结 果等于当前数据类型的最大值减去余值，再加上1。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Uint8ClampedArray 视图的溢出规则，与上面的规则不同。它规定， 凡是发生正向溢出，该值一律等于当前数据类型的最大值，即255;如果 发生负向溢出，该值一律等于当前数据类型的最小值，即0。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> uint8c = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8ClampedArray</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
uint8c[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">256</span>;
uint8c[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 255</span>
uint8c[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">-1</span>;
uint8c[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 0</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.prototype.buffer</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">TypedArray实例的 buffer 属性，返回整段内存区域对应 的 ArrayBuffer 对象。该属性为只读属性。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Float32Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">64</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(a.buffer);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">上面代码的 a 视图对象和 b 视图对象，对应同一个 ArrayBuffer 对 象，即同一段内存。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.prototype.byteLength， TypedArray.prototype.byteOffset</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">byteLength 属性返回TypedArray数组占据的内存长度，单位为字 节。 byteOffset 属性返回TypedArray数组从底层 ArrayBuffer 对象 的哪个字节开始。这两个属性都是只读属性。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v1 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int32Array</span>(b);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v2 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(b, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v3 = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>(b, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
v1.byteLength <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 8</span>
v2.byteLength <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 6</span>
v3.byteLength <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 4</span>
v1.byteOffset <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 0</span>
v2.byteOffset <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2</span>
v3.byteOffset <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.prototype.length</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">length 属性表示TypedArray数组含有多少个成员。注意将 byteLength 属性和 length 属性区分，前者是字节长度，后者是成 员长度。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
a.length <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 8</span>
a.byteLength <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 16</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.prototype.set()</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">TypedArray数组的 set 方法用于复制数组(普通数组或TypedArray数 组)，也就是将一段内容完全复制到另一段内存。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
b.set(a);


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//set 方法还可以接受第二个参数，表示从 b 对象的哪一个成员开始复制 a 对象。</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">10</span>);
b.set(a, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>)
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.prototype.subarray()</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">subarray 方法是对于TypedArray数组的一部分，再建立一个新的视图。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> a = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> b = a.subarray(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>,<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>);
a.byteLength <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 16</span>
b.byteLength <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">subarray 方法的第一个参数是起始的成员序号，第二个参数是结束的 成员序号(不含该成员)，如果省略则包含剩余的全部成员。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.prototype.slice()</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">TypeArray实例的 slice 方法，可以返回一个指定位置的新的 TypedArray实例。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> ui8 = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
ui8.slice(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">-1</span>)
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Uint8Array [ 2 ]</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">slice 方法的参数，表示原数组的具体位置，开始生成新数组。负值 表示逆向的位置</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.of()</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">TypedArray数组的所有构造函数，都有一个静态方法 of ，用于将参数 转为一个TypedArray实例。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Float32Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0.151</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">-8</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3.7</span>)
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Float32Array [ 0.151, -8, 3.7 ]</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">TypedArray.from()</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">静态方法 from 接受一个可遍历的数据结构(比如数组)作为参数，返 回一个基于这个结构的TypedArray实例</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>.from([<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>])
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Uint16Array [ 0, 1, 2 ]</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//这个方法还可以将一种TypedArray实例，转为另一种。</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> ui16 = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span>.from(<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>));
ui16 <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">instanceof</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint16Array</span> <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// true</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//from 方法还可以接受一个函数，作为第二个参数，用来对每个元素进 行遍历，功能类似 map 方法。</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">127</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">126</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">125</span>).map(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">x</span> =&gt;</span> <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span> * x)
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Int8Array [ -2, -4, -6 ]</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>.from(<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int8Array</span>.of(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">127</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">126</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">125</span>), x =&gt; <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span> * x)
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Int16Array [ 254, 252, 250 ]</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">复合视图</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">由于视图的构造函数可以指定起始位置和长度，所以在同一段内存之 中，可以依次存放不同类型的数据，这叫做“复合视图”。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">24</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> idView = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint32Array</span>(buffer, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> usernameView = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(buffer, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">16</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> amountDueView = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Float32Array</span>(buffer, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">20</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">DataView视图</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果一段数据包括多种类型(比如服务器传来的HTTP数据)，这时除了 建立 ArrayBuffer 对象的复合视图以外，还可以通过 DataView 视图 进行操作。DataView 视图提供更多操作选项，而且支持设定字节序</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">构造函数</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">DataView(ArrayBuffer buffer [, 字节起始位置 [, 长度]]);</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">24</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> dv = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">DataView</span>(buffer);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">DataView 实例有以下属性，含义与TypedArray实例的同名方法相同:<br/>
1.DataView.prototype.buffer :返回对应的ArrayBuffer对象 2.DataView.prototype.byteLength :返回占据的内存字节长度 3.DataView.prototype.byteOffset :返回当前视图从对应的ArrayBuffer对象的哪个字节开始</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">DataView 实例提供8个方法读取内存:<br/>
1.getInt8 :读取1个字节，返回一个8位整数。<br/>
2.getUint8 :读取1个字节，返回一个无符号的8位整数。<br/>
3.getInt16 :读取2个字节，返回一个16位整数。<br/>
4.getUint16 :读取2个字节，返回一个无符号的16位整数。<br/>
5.getInt32 :读取4个字节，返回一个32位整数。<br/>
6.getUint32 :读取4个字节，返回一个无符号的32位整数。<br/>
7.getFloat32 :读取4个字节，返回一个32位浮点数。<br/>
8.getFloat64 :读取8个字节，返回一个64位浮点数。<br/>
这一系列 get 方法的参数都是一个字节序号(不能是负数，否则会报错)，表示从哪个字节开始读取。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">24</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> dv = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">DataView</span>(buffer);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 从第1个字节读取一个8位无符号整数</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v1 = dv.getUint8(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 从第2个字节读取一个16位无符号整数</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v2 = dv.getUint16(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 从第4个字节读取一个16位无符号整数</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v3 = dv.getUint16(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果一次读取两个或两个以上字节，就必须明确数据的存储方式，到底 是小端字节序还是大端字节序。默认情况下， DataView 的 get 方法 使用大端字节序解读数据，如果需要使用小端字节序解读，必须在 get 方法的第二个参数指定 true 。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 小端字节序</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v1 = dv.getUint16(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>); <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 大端字节序</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v2 = dv.getUint16(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 大端字节序</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> v3 = dv.getUint16(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">3</span>);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">DataView视图提供8个方法写入内存:<br/>
1.setInt8 :写入1个字节的8位整数。<br/>
2.setUint8 :写入1个字节的8位无符号整数。<br/>
3.setInt16 :写入2个字节的16位整数。<br/>
4.setUint16 :写入2个字节的16位无符号整数。<br/>
5.setInt32 :写入4个字节的32位整数。<br/>
6.setUint32 :写入4个字节的32位无符号整数。<br/>
7.setFloat32 :写入4个字节的32位浮点数。<br/>
8.setFloat64 :写入8个字节的64位浮点数。<br/>
这一系列 set 方法，接受两个参数，第一个参数是字节序号，表示从哪 个字节开始写入，第二个参数为写入的数据。对于那些写入两个或两个 以上字节的方法，需要指定第三个参数， false 或者 undefined 表示 使用大端字节序写入， true 表示使用小端字节序写入。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 在第1个字节，以大端字节序写入值为25的32位整数</span>
dv.setInt32(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">25</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 在第5个字节，以大端字节序写入值为25的32位整数</span>
dv.setInt32(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">25</span>);
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 在第9个字节，以小端字节序写入值为2.5的32位浮点数</span>
dv.setFloat32(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2.5</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果不确定正在使用的计算机的字节序，可以采用下面的判断方式。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> littleEndian = (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> buffer = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">ArrayBuffer</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">DataView</span>(buffer).setInt16(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">256</span>, <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>);
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Int16Array</span>(buffer)[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>] === <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">256</span>;
})();
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果返回 true ，就是小端字节序;如果返回 false ，就是大端字节 序。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">二进制数组的应用</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">大量的Web API用到了 ArrayBuffer 对象和它的视图对象。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">AJAX</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">传统上，服务器通过AJAX操作只能返回文本数据，即 responseType 属性默认为 text 。 XMLHttpRequest 第二版 XHR2 允许服务器返回二进制数据，这时分成两种情况。如果明确知道返回的二进制数据类型，可以把返回类型( responseType )设为 arraybuffer ;如果不知道，就设为 blob 。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> xhr = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> XMLHttpRequest();
xhr.open(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'GET'</span>, someUrl);
xhr.responseType = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'arraybuffer'</span>;
xhr.onload = <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> arrayBuffer = xhr.response;
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ···</span>
};
xhr.send();
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">Canvas</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">网页 Canvas 元素输出的二进制像素数据，就是TypedArray数组。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> canvas = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">document</span>.getElementById(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'myCanvas'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> ctx = canvas.getContext(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'2d'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> imageData = ctx.getImageData(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>, canvas.width,
canvas.height);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> uint8ClampedArray = imageData.data;
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Uint8ClampedArray 类型确保将小于0的值设为0，将大于255的值设为 255。注意，IE 10不支持该类型。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">WebSocket</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">WebSocket可以通过 ArrayBuffer ，发送或接收二进制数据。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> socket = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> WebSocket(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'ws://127.0.0.1:8081'</span>);
socket.binaryType = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'arraybuffer'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Wait until socket is open</span>
socket.addEventListener(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'open'</span>, <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">event</span>) </span>{
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Send binary data</span>
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> typedArray = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">Uint8Array</span>(<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">4</span>);
  socket.send(typedArray.buffer);
});
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Receive binary data</span>
socket.addEventListener(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'message'</span>, <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">event</span>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> arrayBuffer = event.data;
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ···</span>
});
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">Fetch API</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Fetch API取回的数据，就是 ArrayBuffer 对象。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">fetch(url)
.then(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">response</span>)</span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> response.arrayBuffer()
})
.then(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">arrayBuffer</span>)</span>{
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
});
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">File API</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">如果知道一个文件的二进制数据类型，也可以将这个文件读取 为 ArrayBuffer 对象。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> fileInput = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">document</span>.getElementById(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'fileInput'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> file = fileInput.files[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>];
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> reader = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> FileReader();
reader.readAsArrayBuffer(file);
reader.onload = <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> arrayBuffer = reader.result;
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ···</span>
};
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">SharedArrayBuffer</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">JavaScript 是单线程的，Web worker 引入了多线程:主线程用来与用户互 动，Worker 线程用来承担计算任务。每个线程的数据都是隔离的，通<br/>
过 postMessage() 通信。<br/>
线程之间的数据交换可以是各种格式，不仅仅是字符串，也可以是二进 制数据。这种交换采用的是复制机制，即一个进程将需要分享的数据复 制一份，通过 postMessage 方法交给另一个进程。如果数据量比较大，这种通信的效率显然比较低。<br/>
这时可以留出一块内存区域，由主线程与 Worker 线程共享，两方都可以读写，那么就会大大提 高效率，协作起来也会比较简单。<br/>
ES2017 引入 SharedArrayBuffer ，允许 Worker 线程与主线程共享同 一块内存。SharedArrayBuffer 的 API 与 ArrayBuffer 一模一样， 唯一的区别是后者无法共享。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">// 分配 10 万个 32 位整数占据的内存空间
const sab = new
SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT *
100000);
// 建立 32 位整数视图
const ia = new Int32Array(sab); // ia.length == 100000
// 新建一个质数生成器
const primes = new PrimeGenerator();
// 将 10 万个质数，写入这段内存空间
for ( let i=0 ; i &lt; ia.length ; i++ )
  ia[i] = primes.next();
// 向 Worker 线程发送这段共享内存
w.postMessage(ia);


// Worker 线程
let ia;
onmessage = function (ev) {
ia = ev.data;
console.log(ia.length); // 100000 console.log(ia[37]); // 输出 163，因为这是第38个质数
};
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">Atomics 对象</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">多线程共享内存，最大的问题就是如何防止两个线程同时修改某个地 址，或者说，当一个线程修改共享内存以后，必须有一个机制让其他线程同步SharedArrayBuffer API 提供 Atomics 对象，保证所有共享内存的操作都是“原子性”的，并且可以在所有线程内同步。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">现代编程语言中，一条普通的命令被编译器处 理以后，会变成多条机器指令。<br/>
一组机器指令的运行 期间，可能会插入其他线程的指令。<br/>
Atomics 对象就是为了解决这个问题而提出，它可以保证一个操作所 对应的多条机器指令，一定是作为一个整体运行的，中间不会被打断。它所涉及的操作都可以看作是原子性的单操作，这可以避免 线程竞争，提高多线程共享内存时的操作安全。</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">(1)Atomics.store()，Atomics.load()</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">store() 方法用来向共享内存写入数据， load() 方法用来从共享内 存读出数据。比起直接的读写操作，它们的好处是保证了读写操作的原子性</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">Atomics.load(array, index)
Atomics.store(array, index, value)
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//store 方法接受三个参数:SharedBuffer 的视图、位置索引和值，返 回 sharedArray[index] 的值。 load 方法只接受两个参数: SharedBuffer 的视图和位置索引，也是返回 sharedArray[index] 的值。</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 主线程 main.js</span>
ia[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">42</span>] = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">314159</span>; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 原先的值 191 Atomics.store(ia, 37, 123456); // 原先的值是 163</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Worker 线程 worker.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">while</span> (Atomics.load(ia, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">37</span>) == <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">163</span>);
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(ia[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">37</span>]);  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 123456</span>
<span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(ia[<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">42</span>]);  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 314159</span>
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">(2)Atomics.wait()，Atomics.wake()</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 while 循环等待主线程的通知，不是很高效，如果用在主线程， 就会造成卡顿， Atomics 对象提供了 wait() 和 wake() 两个方法用 于等待通知。这两个方法相当于锁内存，即在一个线程进行操作时，让 其他线程休眠(建立锁)，等到操作结束，再唤醒那些休眠的线程(解 除锁)。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomics.wait 用于当 sharedArray[index] 不等于 value ，就返 回 not-equal ，否则就进入休眠，只有使用 Atomics.wake() 或者 time 毫秒以后才能唤醒。被 Atomics.wake() 唤醒时，返回 ok ， 超时唤醒时返回 timed-out 。</span>
Atomics.wait(sharedArray, index, value, time)

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomics.wake 用于唤醒 count 数目在 sharedArray[index] 位置休 眠的线程，让它继续往下运行。</span>
Atomics.wake(sharedArray, index, count)
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">(3)运算方法</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">共享内存上面的某些运算是不能被打断的，即不能在运算过程中，让其 他线程改写内存上面的值。Atomics 对象提供了一些运算方法，防止数 据被改写。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomics.add 用于将 value 加到 sharedArray[index] ，返 回 sharedArray[index] 旧的值。</span>
Atomics.add(sharedArray, index, value)

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomics.sub 用于将 value 从 sharedArray[index] 减去，返 回 sharedArray[index] 旧的值。</span>
Atomics.sub(sharedArray, index, value)

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomics.and 用于将 value 与 sharedArray[index] 进行位运 算 and ，放入 sharedArray[index] ，并返回旧的值。</span>
Atomics.and(sharedArray, index, value)

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomics.or 用于将 value 与 sharedArray[index] 进行位运 算 or ，放入 sharedArray[index] ，并返回旧的值。</span>
Atomics.or(sharedArray, index, value)

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//Atomic.xor 用于将 vaule 与 sharedArray[index] 进行位运 算 xor ，放入 sharedArray[index] ，并返回旧的值。</span>
Atomics.xor(sharedArray, index, value)
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">(4)其他方法</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Atomics.compareExchange(sharedArray, index, oldval, newval) :如果 sharedArray[index] 等于oldval ，就写入newval ，返回 oldval 。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Atomics.exchange(sharedArray, index, value) :设置 sharedArray[index] 的值，返回旧的值。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">Atomics.isLockFree(size) :返回一个布尔值，表<br/>
示 Atomics 对象是否可以处理某个 size 的内存锁定。如果返回 false ，应用程序就需要自己来实现锁定。</p>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E3%80%81%20TypedArray%20%E8%A7%86%E5%9B%BE%E5%92%8C%20DataView%20%E8%A7%86%E5%9B%BE%E6%98%AF%20JavaScript%20%E6%93%8D%E4%BD%9C%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E7%9A%84%E4%B8%80%E4%B8%AA%E6%8E%A5%E5%8F%A3%E3%80%82%E5%AE%83%E4%BB%AC%E9%83%BD%E6%98%AF%E4%BB%A5%E6%95%B0%E7%BB%84%E7%9A%84%E8%AF%AD%E6%B3%95%E5%A4%84%E7%90%86%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%89%80%E4%BB%A5%E7%BB%9F%E7%A7%B0%E4%B8%BA%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E7%BB%84%E3%80%82%0A%0A(1)%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%3A%E4%BB%A3%E8%A1%A8%E5%86%85%E5%AD%98%E4%B9%8B%E4%B8%AD%E7%9A%84%E4%B8%80%E6%AE%B5%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E2%80%9C%E8%A7%86%E5%9B%BE%E2%80%9D%E8%BF%9B%E8%A1%8C%E6%93%8D%E4%BD%9C%E3%80%82%E2%80%9C%E8%A7%86%E5%9B%BE%E2%80%9D%E9%83%A8%E7%BD%B2%E4%BA%86%E6%95%B0%E7%BB%84%E6%8E%A5%E5%8F%A3%EF%BC%8C%E8%BF%99%E6%84%8F%E5%91%B3%E7%9D%80%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%94%A8%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95%E6%93%8D%E4%BD%9C%E5%86%85%E5%AD%98%E3%80%82%0A%0A(2)%20TypedArray%20%E8%A7%86%E5%9B%BE%3A%E5%85%B1%E5%8C%85%E6%8B%AC9%E7%A7%8D%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%A7%86%E5%9B%BE%EF%BC%8C%E6%AF%94%E5%A6%82%20Uint8Array%20(%E6%97%A0%E7%AC%A6%E5%8F%B78%E4%BD%8D%E6%95%B4%E6%95%B0)%E6%95%B0%E7%BB%84%E8%A7%86%E5%9B%BE%2C%20Int16Array%20(16%E4%BD%8D%E6%95%B4%E6%95%B0)%E6%95%B0%E7%BB%84%E8%A7%86%E5%9B%BE%2C%20Float32Array%20(32%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0)%E6%95%B0%E7%BB%84%E8%A7%86%E5%9B%BE%E7%AD%89%E7%AD%89%E3%80%82%0A%0A(3)%20DataView%20%E8%A7%86%E5%9B%BE%3A%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%8D%E5%90%88%E6%A0%BC%E5%BC%8F%E7%9A%84%E8%A7%86%E5%9B%BE%EF%BC%8C%E6%AF%94%E5%A6%82%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%AD%97%E8%8A%82%E6%98%AFUint8(%E6%97%A0%E7%AC%A6%E5%8F%B78%E4%BD%8D%E6%95%B4%E6%95%B0)%E3%80%81%E7%AC%AC%E4%BA%8C%E3%80%81%E4%B8%89%E4%B8%AA%E5%AD%97%E8%8A%82%E6%98%AF%20Int16(16%E4%BD%8D%E6%95%B4%E6%95%B0)%E3%80%81%E7%AC%AC%E5%9B%9B%E4%B8%AA%E5%AD%97%E8%8A%82%E5%BC%80%E5%A7%8B%E6%98%AF%20Float32(32%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0)%E7%AD%89%E7%AD%89%EF%BC%8C%E6%AD%A4%E5%A4%96%E8%BF%98%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E8%8A%82%E5%BA%8F%E3%80%82%0A%0A%E7%AE%80%E5%8D%95%E8%AF%B4%EF%BC%8C%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E4%BB%A3%E8%A1%A8%E5%8E%9F%E5%A7%8B%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%EF%BC%8CTypedArray%E8%A7%86%E5%9B%BE%E7%94%A8%20%E6%9D%A5%E8%AF%BB%E5%86%99%E7%AE%80%E5%8D%95%E7%B1%BB%E5%9E%8B%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%EF%BC%8C%20DataView%20%E8%A7%86%E5%9B%BE%E7%94%A8%E6%9D%A5%E8%AF%BB%E5%86%99%E5%A4%8D%E6%9D%82%E7%B1%BB%E5%9E%8B%E7%9A%84%E4%BA%8C%20%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E3%80%82%0A%0A%23%23%23%23%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%0A%23%23%23%23%23%20%E6%A6%82%E8%BF%B0%0AArrayBuffer%20%E5%AF%B9%E8%B1%A1%E4%BB%A3%E8%A1%A8%E5%82%A8%E5%AD%98%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E7%9A%84%E4%B8%80%E6%AE%B5%E5%86%85%E5%AD%98%EF%BC%8C%E5%AE%83%E4%B8%8D%E8%83%BD%E7%9B%B4%E6%8E%A5%E8%AF%BB%20%E5%86%99%EF%BC%8C%E5%8F%AA%E8%83%BD%E9%80%9A%E8%BF%87%E8%A7%86%E5%9B%BE(%20TypedArray%20%E8%A7%86%E5%9B%BE%E5%92%8C%20DataView%20%E8%A7%86%E5%9B%BE)%E6%9D%A5%E8%AF%BB%E5%86%99%EF%BC%8C%E8%A7%86%20%E5%9B%BE%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%A5%E6%8C%87%E5%AE%9A%E6%A0%BC%E5%BC%8F%E8%A7%A3%E8%AF%BB%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E3%80%82%0AArrayBuffer%20%E4%B9%9F%E6%98%AF%E4%B8%80%E4%B8%AA%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%88%86%E9%85%8D%E4%B8%80%E6%AE%B5%E5%8F%AF%E4%BB%A5%E5%AD%98%E6%94%BE%E6%95%B0%E6%8D%AE%E7%9A%84%E8%BF%9E%E7%BB%AD%20%E5%86%85%E5%AD%98%E5%8C%BA%E5%9F%9F%E3%80%82%0A%60%60%60%0Aconst%20buf%20%3D%20new%20ArrayBuffer(32)%3B%0A%60%60%60%0A%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E4%BA%86%E4%B8%80%E6%AE%B532%E5%AD%97%E8%8A%82%E7%9A%84%E5%86%85%E5%AD%98%E5%8C%BA%E5%9F%9F%EF%BC%8C%E6%AF%8F%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%84%E5%80%BC%E9%BB%98%E8%AE%A4%E9%83%BD%E6%98%AF0%E3%80%82%0A%0A%23%23%23%23%23%20ArrayBuffer.prototype.byteLength%0AArrayBuffer%20%E5%AE%9E%E4%BE%8B%E7%9A%84%20byteLength%20%E5%B1%9E%E6%80%A7%EF%BC%8C%E8%BF%94%E5%9B%9E%E6%89%80%E5%88%86%E9%85%8D%E7%9A%84%E5%86%85%E5%AD%98%E5%8C%BA%E5%9F%9F%E7%9A%84%E5%AD%97%20%E8%8A%82%E9%95%BF%E5%BA%A6%E3%80%82%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(32)%3B%0Abuffer.byteLength%0A%2F%2F%2032%0A%0A%2F%2F%E5%A6%82%E6%9E%9C%E8%A6%81%E5%88%86%E9%85%8D%E7%9A%84%E5%86%85%E5%AD%98%E5%8C%BA%E5%9F%9F%E5%BE%88%E5%A4%A7%EF%BC%8C%E6%9C%89%E5%8F%AF%E8%83%BD%E5%88%86%E9%85%8D%E5%A4%B1%E8%B4%A5(%E5%9B%A0%E4%B8%BA%E6%B2%A1%E6%9C%89%E9%82%A3%E4%B9%88%E5%A4%9A%E7%9A%84%E8%BF%9E%E7%BB%AD%0A%E7%A9%BA%E4%BD%99%E5%86%85%E5%AD%98)%EF%BC%8C%E6%89%80%E4%BB%A5%E6%9C%89%E5%BF%85%E8%A6%81%E6%A3%80%E6%9F%A5%E6%98%AF%E5%90%A6%E5%88%86%E9%85%8D%E6%88%90%E5%8A%9F%E3%80%82%0Aif%20(buffer.byteLength%20%3D%3D%3D%20n)%20%7B%20%2F%2F%20%E6%88%90%E5%8A%9F%0A%7D%20else%20%7B%20%2F%2F%20%E5%A4%B1%E8%B4%A5%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%23%20ArrayBuffer.prototype.slice()%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(8)%3B%0Aconst%20newBuffer%20%3D%20buffer.slice(0%2C%203)%3B%0A%60%60%60%0A%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E6%8B%B7%E8%B4%9D%20buffer%20%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%89%8D3%E4%B8%AA%E5%AD%97%E8%8A%82(%E4%BB%8E0%E5%BC%80%E5%A7%8B%EF%BC%8C%E5%88%B0%E7%AC%AC3%E4%B8%AA%E5%AD%97%E8%8A%82%E5%89%8D%E9%9D%A2%20%E7%BB%93%E6%9D%9F)%EF%BC%8C%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E3%80%82%20slice%20%E6%96%B9%E6%B3%95%E5%85%B6%E5%AE%9E%E5%8C%85%E5%90%AB%E4%B8%A4%E6%AD%A5%EF%BC%8C%E7%AC%AC%E4%B8%80%E6%AD%A5%E6%98%AF%E5%85%88%E5%88%86%E9%85%8D%E4%B8%80%E6%AE%B5%E6%96%B0%E5%86%85%E5%AD%98%EF%BC%8C%E7%AC%AC%E4%BA%8C%E6%AD%A5%E6%98%AF%E5%B0%86%E5%8E%9F%E6%9D%A5%E9%82%A3%E4%B8%AA%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D%E8%BF%87%E5%8E%BB%E3%80%82%0A%0A*%E9%99%A4%E4%BA%86%20slice%20%E6%96%B9%E6%B3%95%EF%BC%8C%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E4%B8%8D%E6%8F%90%E4%BE%9B%E4%BB%BB%E4%BD%95%E7%9B%B4%E6%8E%A5%E8%AF%BB%E5%86%99%E5%86%85%E5%AD%98%E7%9A%84%E6%96%B9%20%E6%B3%95%EF%BC%8C%E5%8F%AA%E5%85%81%E8%AE%B8%E5%9C%A8%E5%85%B6%E4%B8%8A%E6%96%B9%E5%BB%BA%E7%AB%8B%E8%A7%86%E5%9B%BE%EF%BC%8C%E7%84%B6%E5%90%8E%E9%80%9A%E8%BF%87%E8%A7%86%E5%9B%BE%E8%AF%BB%E5%86%99%E3%80%82*%0A%0A%23%23%23%23%23%20ArrayBuffer.isView()%0AArrayBuffer%20%E6%9C%89%E4%B8%80%E4%B8%AA%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%20isView%20%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%B8%83%E5%B0%94%E5%80%BC%EF%BC%8C%E8%A1%A8%E7%A4%BA%E5%8F%82%E6%95%B0%20%E6%98%AF%E5%90%A6%E4%B8%BA%20ArrayBuffer%20%E7%9A%84%E8%A7%86%E5%9B%BE%E5%AE%9E%E4%BE%8B%E3%80%82%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(8)%3B%0AArrayBuffer.isView(buffer)%20%2F%2F%20false%0Aconst%20v%20%3D%20new%20Int32Array(buffer)%3B%0AArrayBuffer.isView(v)%20%2F%2F%20true%0A%60%60%60%0A%0A%23%23%23%23%20TypedArray%E8%A7%86%E5%9B%BE%0A%23%23%23%23%23%20%E6%A6%82%E8%BF%B0%0A%E7%9B%AE%E5%89%8D%EF%BC%8CTypedArray%E8%A7%86%E5%9B%BE%E4%B8%80%E5%85%B1%E5%8C%85%E6%8B%AC9%E7%A7%8D%E7%B1%BB%E5%9E%8B%EF%BC%8C%E6%AF%8F%E4%B8%80%E7%A7%8D%E8%A7%86%E5%9B%BE%E9%83%BD%E6%98%AF%E4%B8%80%E7%A7%8D%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E3%80%82%0A1.Int8Array%20%3A8%E4%BD%8D%E6%9C%89%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A61%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%0A2.Uint8Array%20%3A8%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A61%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%0A3.Uint8ClampedArray%20%3A8%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A61%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E6%BA%A2%E5%87%BA%E5%A4%84%E7%90%86%E4%B8%8D%E5%90%8C%E3%80%82%0A4.Int16Array%20%3A16%E4%BD%8D%E6%9C%89%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A62%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%0A5.Uint16Array%20%3A16%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A62%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%20%0A6.Int32Array%20%3A32%E4%BD%8D%E6%9C%89%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A64%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%20%0A7.Uint32Array%20%3A32%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A64%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%20%0A8.Float32Array%20%3A32%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A64%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%20%0A9.Float64Array%20%3A64%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%EF%BC%8C%E9%95%BF%E5%BA%A68%E4%B8%AA%E5%AD%97%E8%8A%82%E3%80%82%09%0A%09%09%09%09%0A%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%E4%B8%8ETypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E5%B7%AE%E5%BC%82%E4%B8%BB%E8%A6%81%E5%9C%A8%E4%BB%A5%E4%B8%8B%E6%96%B9%E9%9D%A2%E3%80%82%0A1.TypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E6%89%80%E6%9C%89%E6%88%90%E5%91%98%EF%BC%8C%E9%83%BD%E6%98%AF%E5%90%8C%E4%B8%80%E7%A7%8D%E7%B1%BB%E5%9E%8B%E3%80%82%0A2.TypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E6%88%90%E5%91%98%E6%98%AF%E8%BF%9E%E7%BB%AD%E7%9A%84%EF%BC%8C%E4%B8%8D%E4%BC%9A%E6%9C%89%E7%A9%BA%E4%BD%8D%E3%80%82%0A3.TypedArray%E6%95%B0%E7%BB%84%E6%88%90%E5%91%98%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC%E4%B8%BA0%E3%80%82%E6%AF%94%E5%A6%82%EF%BC%8C%20new%20Array(10)%20%E8%BF%94%E5%9B%9E%E4%B8%80%0A%E4%B8%AA%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%EF%BC%8C%E9%87%8C%E9%9D%A2%E6%B2%A1%E6%9C%89%E4%BB%BB%E4%BD%95%E6%88%90%E5%91%98%EF%BC%8C%E5%8F%AA%E6%98%AF10%E4%B8%AA%E7%A9%BA%E4%BD%8D%3B%20newUint8Array(10)%20%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AATypedArray%E6%95%B0%E7%BB%84%EF%BC%8C%E9%87%8C%E9%9D%A210%E4%B8%AA%E6%88%90%E5%91%98%E9%83%BD%E6%98%AF0%E3%80%82%0A4.TypedArray%E6%95%B0%E7%BB%84%E5%8F%AA%E6%98%AF%E4%B8%80%E5%B1%82%E8%A7%86%E5%9B%BE%EF%BC%8C%E6%9C%AC%E8%BA%AB%E4%B8%8D%E5%82%A8%E5%AD%98%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%AE%83%E7%9A%84%E6%95%B0%E6%8D%AE%E9%83%BD%E5%82%A8%E5%AD%98%E5%9C%A8%0A%E5%BA%95%E5%B1%82%E7%9A%84%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E4%B9%8B%E4%B8%AD%EF%BC%8C%E8%A6%81%E8%8E%B7%E5%8F%96%E5%BA%95%E5%B1%82%E5%AF%B9%E8%B1%A1%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8%20buffer%20%E5%B1%9E%E6%80%A7%E3%80%82%0A%0A%23%23%23%23%23%20%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%0ATypedArray%E6%95%B0%E7%BB%84%E6%8F%90%E4%BE%9B9%E7%A7%8D%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%8C%E7%94%A8%E6%9D%A5%E7%94%9F%E6%88%90%E7%9B%B8%E5%BA%94%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%95%B0%E7%BB%84%E5%AE%9E%E4%BE%8B%E3%80%82%0A%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%9C%89%E5%A4%9A%E7%A7%8D%E7%94%A8%E6%B3%95%E3%80%82%0A**(1)TypedArray(buffer%2C%20byteOffset%3D0%2C%20length%3F)**%0A%E5%90%8C%E4%B8%80%E4%B8%AA%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E4%B9%8B%E4%B8%8A%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%A0%B9%E6%8D%AE%E4%B8%8D%E5%90%8C%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%BB%BA%E7%AB%8B%E5%A4%9A%E4%B8%AA%20%E8%A7%86%E5%9B%BE%E3%80%82%0A%60%60%60js%0A%2F%2F%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA8%E5%AD%97%E8%8A%82%E7%9A%84ArrayBuffer%0Aconst%20b%20%3D%20new%20ArrayBuffer(8)%3B%0A%2F%2F%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%8C%87%E5%90%91b%E7%9A%84Int32%E8%A7%86%E5%9B%BE%EF%BC%8C%E5%BC%80%E5%A7%8B%E4%BA%8E%E5%AD%97%E8%8A%820%EF%BC%8C%E7%9B%B4%E5%88%B0%E7%BC%93%E5%86%B2%E5%8C%BA%E7%9A%84%E6%9C%AB%E5%B0%BE%0Aconst%20v1%20%3D%20new%20Int32Array(b)%3B%0A%2F%2F%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%8C%87%E5%90%91b%E7%9A%84Uint8%E8%A7%86%E5%9B%BE%EF%BC%8C%E5%BC%80%E5%A7%8B%E4%BA%8E%E5%AD%97%E8%8A%822%EF%BC%8C%E7%9B%B4%E5%88%B0%E7%BC%93%E5%86%B2%E5%8C%BA%E7%9A%84%E6%9C%AB%E5%B0%BE%0Aconst%20v2%20%3D%20new%20Uint8Array(b%2C%202)%3B%0A%2F%2F%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%8C%87%E5%90%91b%E7%9A%84Int16%E8%A7%86%E5%9B%BE%EF%BC%8C%E5%BC%80%E5%A7%8B%E4%BA%8E%E5%AD%97%E8%8A%822%EF%BC%8C%E9%95%BF%E5%BA%A6%E4%B8%BA2%0Aconst%20v3%20%3D%20new%20Int16Array(b%2C%202%2C%202)%3B%0A%60%60%60%0A%0A%E8%A7%86%E5%9B%BE%E7%9A%84%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%8F%AF%E4%BB%A5%E6%8E%A5%E5%8F%97%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%3A%0A%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0(%E5%BF%85%E9%9C%80)%3A%E8%A7%86%E5%9B%BE%E5%AF%B9%E5%BA%94%E7%9A%84%E5%BA%95%E5%B1%82%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E3%80%82%0A%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0(%E5%8F%AF%E9%80%89)%3A%E8%A7%86%E5%9B%BE%E5%BC%80%E5%A7%8B%E7%9A%84%E5%AD%97%E8%8A%82%E5%BA%8F%E5%8F%B7%EF%BC%8C%E9%BB%98%E8%AE%A4%E4%BB%8E0%E5%BC%80%E5%A7%8B%E3%80%82%20%0A%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0(%E5%8F%AF%E9%80%89)%3A%E8%A7%86%E5%9B%BE%E5%8C%85%E5%90%AB%E7%9A%84%E6%95%B0%E6%8D%AE%E4%B8%AA%E6%95%B0%EF%BC%8C%E9%BB%98%E8%AE%A4%E7%9B%B4%E5%88%B0%E6%9C%AC%E6%AE%B5%E5%86%85%E5%AD%98%E5%8C%BA%20%E5%9F%9F%E7%BB%93%E6%9D%9F%E3%80%82%0A%0A%E6%B3%A8%E6%84%8F%EF%BC%8C%20byteOffset%20%E5%BF%85%E9%A1%BB%E4%B8%8E%E6%89%80%E8%A6%81%E5%BB%BA%E7%AB%8B%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E4%B8%80%E8%87%B4%EF%BC%8C%E5%90%A6%E5%88%99%E4%BC%9A%E6%8A%A5%E9%94%99%E3%80%82%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(8)%3B%0Aconst%20i16%20%3D%20new%20Int16Array(buffer%2C%201)%3B%0A%2F%2F%E5%9B%A0%E4%B8%BA%EF%BC%8C%E5%B8%A6%E7%AC%A6%E5%8F%B7%E7%9A%8416%E4%BD%8D%E6%95%B4%E6%95%B0%E9%9C%80%E8%A6%81%E4%B8%A4%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E6%89%80%E4%BB%A5%20byteOffset%20%E5%8F%82%E6%95%B0%E5%BF%85%E9%A1%BB%E8%83%BD%E5%A4%9F%E8%A2%AB2%E6%95%B4%E9%99%A4%E3%80%82%0A%60%60%60%0A**(2)TypedArray(length)**%0A%E8%A7%86%E5%9B%BE%E8%BF%98%E5%8F%AF%E4%BB%A5%E4%B8%8D%E9%80%9A%E8%BF%87%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%EF%BC%8C%E7%9B%B4%E6%8E%A5%E5%88%86%E9%85%8D%E5%86%85%E5%AD%98%E8%80%8C%E7%94%9F%E6%88%90%E3%80%82%0A%60%60%60js%0Aconst%20f64a%20%3D%20new%20Float64Array(8)%3B%0Af64a%5B0%5D%20%3D%2010%3B%0Af64a%5B1%5D%20%3D%2020%3B%0Af64a%5B2%5D%20%3D%20f64a%5B0%5D%20%2B%20f64a%5B1%5D%3B%0A%60%60%60%0A%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA8%E4%B8%AA%E6%88%90%E5%91%98%E7%9A%84%20Float64Array%20%E6%95%B0%E7%BB%84(%E5%85%B164%E5%AD%97%E8%8A%82)%EF%BC%8C%E7%84%B6%E5%90%8E%20%E4%BE%9D%E6%AC%A1%E5%AF%B9%E6%AF%8F%E4%B8%AA%E6%88%90%E5%91%98%E8%B5%8B%E5%80%BC%E3%80%82%E8%BF%99%E6%97%B6%EF%BC%8C%E8%A7%86%E5%9B%BE%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E5%B0%B1%E6%98%AF%E6%88%90%E5%91%98%E7%9A%84%E4%B8%AA%E6%95%B0%E3%80%82%0A%0A**(3)TypedArray(typedArray)**%0ATypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%8E%A5%E5%8F%97%E5%8F%A6%E4%B8%80%E4%B8%AATypedArray%E5%AE%9E%E4%BE%8B%E4%BD%9C%E4%B8%BA%E5%8F%82%0A%E6%95%B0%E3%80%82%0A%60%60%60js%0Aconst%20typedArray%20%3D%20new%20Int8Array(new%20Uint8Array(4))%3B%0A%0A%2F%2F%E6%B3%A8%E6%84%8F%EF%BC%8C%E6%AD%A4%E6%97%B6%E7%94%9F%E6%88%90%E7%9A%84%E6%96%B0%E6%95%B0%E7%BB%84%EF%BC%8C%E5%8F%AA%E6%98%AF%E5%A4%8D%E5%88%B6%E4%BA%86%E5%8F%82%E6%95%B0%E6%95%B0%E7%BB%84%E7%9A%84%E5%80%BC%EF%BC%8C%E5%AF%B9%E5%BA%94%E7%9A%84%E5%BA%95%E5%B1%82%E5%86%85%E5%AD%98%E6%98%AF%E4%B8%8D%E4%B8%80%E6%A0%B7%E7%9A%84%E3%80%82%E6%96%B0%E6%95%B0%E7%BB%84%E4%BC%9A%E5%BC%80%E8%BE%9F%E4%B8%80%E6%AE%B5%E6%96%B0%E7%9A%84%E5%86%85%E5%AD%98%E5%82%A8%E5%AD%98%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%B8%8D%E4%BC%9A%E5%9C%A8%E5%8E%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%86%85%E5%AD%98%E4%B9%8B%E4%B8%8A%E5%BB%BA%E7%AB%8B%E8%A7%86%E5%9B%BE%E3%80%82%0A%0Aconst%20x%20%3D%20new%20Int8Array(%5B1%2C%201%5D)%3B%0Aconst%20y%20%3D%20new%20Int8Array(x)%3B%0Ax%5B0%5D%20%2F%2F%201%0Ay%5B0%5D%20%2F%2F%201%0Ax%5B0%5D%20%3D%202%3B%0Ay%5B0%5D%20%2F%2F%201%0A%60%60%60%0A%0A**(4)TypedArray(arrayLikeObject)**%0A%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E4%B8%80%E4%B8%AA%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%EF%BC%8C%E7%84%B6%E5%90%8E%E7%9B%B4%E6%8E%A5%E7%94%9F%E6%88%90TypedArray%E5%AE%9E%E4%BE%8B%0A%60%60%60js%0Aconst%20typedArray%20%3D%20new%20Uint8Array(%5B1%2C%202%2C%203%2C%204%5D)%3B%0A%2F%2F%E6%B3%A8%E6%84%8F%EF%BC%8C%E8%BF%99%E6%97%B6TypedArray%E8%A7%86%E5%9B%BE%E4%BC%9A%E9%87%8D%E6%96%B0%E5%BC%80%E8%BE%9F%E5%86%85%E5%AD%98%EF%BC%8C%E4%B8%8D%E4%BC%9A%E5%9C%A8%E5%8E%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%86%85%E5%AD%98%E4%B8%8A%E5%BB%BA%20%E7%AB%8B%E8%A7%86%E5%9B%BE%E3%80%82%0A%0A%2F%2FTypedArray%E6%95%B0%E7%BB%84%E4%B9%9F%E5%8F%AF%E4%BB%A5%E8%BD%AC%E6%8D%A2%E5%9B%9E%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%E3%80%82%0Aconst%20normalArray%20%3D%20%5B...typedArray%5D%3B%0A%2F%2F%20or%0Aconst%20normalArray%20%3D%20Array.from(typedArray)%3B%0A%2F%2F%20or%0Aconst%20normalArray%20%3D%0AArray.prototype.slice.call(typedArray)%3B%0A%60%60%60%0A%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%E7%9A%84%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95%E5%92%8C%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%AF%B9TypedArray%E6%95%B0%E7%BB%84%E5%AE%8C%E5%85%A8%E9%80%82%E7%94%A8%E3%80%82%0A%0A%E6%B3%A8%E6%84%8F%EF%BC%8CTypedArray%E6%95%B0%E7%BB%84%E6%B2%A1%E6%9C%89%20concat%20%E6%96%B9%E6%B3%95%E3%80%82%E5%A6%82%E6%9E%9C%E6%83%B3%E8%A6%81%E5%90%88%E5%B9%B6%E5%A4%9A%E4%B8%AA%20TypedArray%E6%95%B0%E7%BB%84%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%94%A8%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%87%BD%E6%95%B0%E3%80%82%0A%60%60%60js%0Afunction%20concatenate(resultConstructor%2C%20...arrays)%20%7B%0A%20%20let%20totalLength%20%3D%200%3B%0A%20%20for%20(let%20arr%20of%20arrays)%20%7B%0A%20%20%20%20totalLength%20%2B%3D%20arr.length%3B%0A%20%20%7D%0A%20%20let%20result%20%3D%20new%20resultConstructor(totalLength)%3B%0A%20%20let%20offset%20%3D%200%3B%0A%20%20for%20(let%20arr%20of%20arrays)%20%7B%0A%20%20%20%20result.set(arr%2C%20offset)%3B%0A%20%20%20%20offset%20%2B%3D%20arr.length%3B%0A%20%20%7D%0A%20%20return%20result%3B%0A%7D%0Aconcatenate(Uint8Array%2C%20Uint8Array.of(1%2C%202)%2C%0AUint8Array.of(3%2C%204))%0A%2F%2F%20Uint8Array%20%5B1%2C%202%2C%203%2C%204%5D%0A%60%60%60%0ATypedArray%E6%95%B0%E7%BB%84%E4%B8%8E%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%E4%B8%80%E6%A0%B7%EF%BC%8C%E9%83%A8%E7%BD%B2%E4%BA%86Iterator%E6%8E%A5%E5%8F%A3%EF%BC%8C%E6%89%80%E4%BB%A5%E5%8F%AF%E4%BB%A5%E8%A2%AB%E9%81%8D%E5%8E%86%E3%80%82%0A%60%60%60js%0Alet%20ui8%20%3D%20Uint8Array.of(0%2C%201%2C%202)%3B%0Afor%20(let%20byte%20of%20ui8)%20%7B%0A%20%20console.log(byte)%3B%0A%7D%0A%2F%2F%200%20%2F%2F%201%20%2F%2F%202%0A%60%60%60%0A%0A%23%23%23%23%23%20%E5%AD%97%E8%8A%82%E5%BA%8F%0A%E5%AD%97%E8%8A%82%E5%BA%8F%E6%8C%87%E7%9A%84%E6%98%AF%E6%95%B0%E5%80%BC%E5%9C%A8%E5%86%85%E5%AD%98%E4%B8%AD%E7%9A%84%E8%A1%A8%E7%A4%BA%E6%96%B9%E5%BC%8F%E3%80%82%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(16)%3B%0Aconst%20int32View%20%3D%20new%20Int32Array(buffer)%3B%0Afor%20(let%20i%20%3D%200%3B%20i%20%3C%20int32View.length%3B%20i%2B%2B)%20%7B%0A%20%20int32View%5Bi%5D%20%3D%20i%20*%202%3B%0A%7D%0A%60%60%60%0A%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA16%E5%AD%97%E8%8A%82%E7%9A%84%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%EF%BC%8C%E7%84%B6%E5%90%8E%E5%9C%A8%E5%AE%83%E7%9A%84%E5%9F%BA%E7%A1%80%E4%B8%8A%EF%BC%8C%20%E5%BB%BA%E7%AB%8B%E4%BA%86%E4%B8%80%E4%B8%AA32%E4%BD%8D%E6%95%B4%E6%95%B0%E7%9A%84%E8%A7%86%E5%9B%BE%E3%80%82%E7%94%B1%E4%BA%8E%E6%AF%8F%E4%B8%AA32%E4%BD%8D%E6%95%B4%E6%95%B0%E5%8D%A0%E6%8D%AE4%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E6%89%80%E4%BB%A5%E4%B8%80%E5%85%B1%20%E5%8F%AF%E4%BB%A5%E5%86%99%E5%85%A54%E4%B8%AA%E6%95%B4%E6%95%B0%EF%BC%8C%E4%BE%9D%E6%AC%A1%E4%B8%BA0%EF%BC%8C2%EF%BC%8C4%EF%BC%8C6%E3%80%82%0A%0A%E5%A6%82%E6%9E%9C%E5%9C%A8%E8%BF%99%E6%AE%B5%E6%95%B0%E6%8D%AE%E4%B8%8A%E6%8E%A5%E7%9D%80%E5%BB%BA%E7%AB%8B%E4%B8%80%E4%B8%AA16%E4%BD%8D%E6%95%B4%E6%95%B0%E7%9A%84%E8%A7%86%E5%9B%BE%EF%BC%8C%E5%88%99%E5%8F%AF%E4%BB%A5%E8%AF%BB%E5%87%BA%E5%AE%8C%E5%85%A8%E4%B8%8D%E4%B8%80%20%E6%A0%B7%E7%9A%84%E7%BB%93%E6%9E%9C%E3%80%82%0A%60%60%60js%0Aconst%20int16View%20%3D%20new%20Int16Array(buffer)%3B%0Afor%20(let%20i%20%3D%200%3B%20i%20%3C%20int16View.length%3B%20i%2B%2B)%20%7B%0A%20%20console.log(%22Entry%20%22%20%2B%20i%20%2B%20%22%3A%20%22%20%2B%20int16View%5Bi%5D)%3B%0A%7D%0A%2F%2F%20Entry%200%3A%200%0A%2F%2F%20Entry%201%3A%200%0A%2F%2F%20Entry%202%3A%202%0A%2F%2F%20Entry%203%3A%200%0A%2F%2F%20Entry%204%3A%204%0A%2F%2F%20Entry%205%3A%200%0A%2F%2F%20Entry%206%3A%206%0A%2F%2F%20Entry%207%3A%200%0A%60%60%60%0A%E7%94%B1%E4%BA%8E%E6%AF%8F%E4%B8%AA16%E4%BD%8D%E6%95%B4%E6%95%B0%E5%8D%A0%E6%8D%AE2%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E6%89%80%E4%BB%A5%E6%95%B4%E4%B8%AA%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E7%8E%B0%E5%9C%A8%E5%88%86%E6%88%90%208%E6%AE%B5%0A%E7%94%B1%E4%BA%8Ex86%E4%BD%93%E7%B3%BB%E7%9A%84%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%83%BD%E9%87%87%E7%94%A8%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F(little%20endian)%EF%BC%8C%20%E7%9B%B8%E5%AF%B9%E9%87%8D%E8%A6%81%E7%9A%84%E5%AD%97%E8%8A%82%E6%8E%92%E5%9C%A8%E5%90%8E%E9%9D%A2%E7%9A%84%E5%86%85%E5%AD%98%E5%9C%B0%E5%9D%80%EF%BC%8C%E7%9B%B8%E5%AF%B9%E4%B8%8D%E9%87%8D%E8%A6%81%E5%AD%97%E8%8A%82%E6%8E%92%E5%9C%A8%E5%89%8D%E9%9D%A2%E7%9A%84%E5%86%85%E5%AD%98%20%E5%9C%B0%E5%9D%80%EF%BC%8C%E6%89%80%E4%BB%A5%E5%B0%B1%E5%BE%97%E5%88%B0%E4%BA%86%E4%B8%8A%E9%9D%A2%E7%9A%84%E7%BB%93%E6%9E%9C%E3%80%82%0A%0A%E6%AF%94%E5%A6%82%EF%BC%8C%E4%B8%80%E4%B8%AA%E5%8D%A0%E6%8D%AE%E5%9B%9B%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8416%E8%BF%9B%E5%88%B6%E6%95%B0%200x12345678%20%EF%BC%8C%E5%86%B3%E5%AE%9A%E5%85%B6%E5%A4%A7%E5%B0%8F%E7%9A%84%E6%9C%80%E9%87%8D%20%E8%A6%81%E7%9A%84%E5%AD%97%E8%8A%82%E6%98%AF%E2%80%9C12%E2%80%9D%EF%BC%8C%E6%9C%80%E4%B8%8D%E9%87%8D%E8%A6%81%E7%9A%84%E6%98%AF%E2%80%9C78%E2%80%9D%E3%80%82%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%B0%86%E6%9C%80%E4%B8%8D%E9%87%8D%E8%A6%81%E7%9A%84%E5%AD%97%E8%8A%82%E6%8E%92%20%E5%9C%A8%E5%89%8D%E9%9D%A2%EF%BC%8C%E5%82%A8%E5%AD%98%E9%A1%BA%E5%BA%8F%E5%B0%B1%E6%98%AF%2078563412%20%3B%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%88%99%E5%AE%8C%E5%85%A8%E7%9B%B8%E5%8F%8D%EF%BC%8C%E5%B0%86%E6%9C%80%E9%87%8D%E8%A6%81%20%E7%9A%84%E5%AD%97%E8%8A%82%E6%8E%92%E5%9C%A8%E5%89%8D%E9%9D%A2%EF%BC%8C%E5%82%A8%E5%AD%98%E9%A1%BA%E5%BA%8F%E5%B0%B1%E6%98%AF%2012345678%20%E3%80%82%0A%0A%E4%B8%8B%E9%9D%A2%E6%98%AF%E5%8F%A6%E4%B8%80%E4%B8%AA%E4%BE%8B%E5%AD%90%E3%80%82%0A%60%60%60js%0A%2F%2F%20%E5%81%87%E5%AE%9A%E6%9F%90%E6%AE%B5buffer%E5%8C%85%E5%90%AB%E5%A6%82%E4%B8%8B%E5%AD%97%E8%8A%82%20%5B0x02%2C%200x01%2C%200x03%2C%200x07%5D%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(4)%3B%0Aconst%20v1%20%3D%20new%20Uint8Array(buffer)%3B%0Av1%5B0%5D%20%3D%202%3B%0Av1%5B1%5D%20%3D%201%3B%0Av1%5B2%5D%20%3D%203%3B%0Av1%5B3%5D%20%3D%207%3B%0Aconst%20uInt16View%20%3D%20new%20Uint16Array(buffer)%3B%0A%2F%2F%20%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%87%87%E7%94%A8%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%0A%2F%2F%20%E6%89%80%E4%BB%A5%E5%A4%B4%E4%B8%A4%E4%B8%AA%E5%AD%97%E8%8A%82%E7%AD%89%E4%BA%8E258%0Aif%20(uInt16View%5B0%5D%20%3D%3D%3D%20258)%20%7B%0A%20%20console.log('OK')%3B%20%2F%2F%20%22OK%22%0A%7D%0A%2F%2F%20%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%0AuInt16View%5B0%5D%20%3D%20255%3B%20%2F%2F%20%E5%AD%97%E8%8A%82%E5%8F%98%E4%B8%BA%5B0xFF%2C%200x00%2C%200x03%2C%200x07%5D%0AuInt16View%5B0%5D%20%3D%200xff05%3B%20%2F%2F%20%E5%AD%97%E8%8A%82%E5%8F%98%E4%B8%BA%5B0x05%2C%200xFF%2C%200x03%2C%200x07%5D%0AuInt16View%5B1%5D%20%3D%200x0210%3B%20%2F%2F%20%E5%AD%97%E8%8A%82%E5%8F%98%E4%B8%BA%5B0x05%2C%200xFF%2C%200x10%2C%200x02%5D%0A%60%60%60%0A%0A%E4%B8%8B%E9%9D%A2%E7%9A%84%E5%87%BD%E6%95%B0%E5%8F%AF%E4%BB%A5%E7%94%A8%E6%9D%A5%E5%88%A4%E6%96%AD%EF%BC%8C%E5%BD%93%E5%89%8D%E8%A7%86%E5%9B%BE%E6%98%AF%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%EF%BC%8C%E8%BF%98%E6%98%AF%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E3%80%82%0A%60%60%60js%0Aconst%20BIG_ENDIAN%20%3D%20Symbol('BIG_ENDIAN')%3B%0Aconst%20LITTLE_ENDIAN%20%3D%20Symbol('LITTLE_ENDIAN')%3B%0Afunction%20getPlatformEndianness()%20%7B%0A%20%20let%20arr32%20%3D%20Uint32Array.of(0x12345678)%3B%0A%20%20let%20arr8%20%3D%20new%20Uint8Array(arr32.buffer)%3B%0A%20%20switch%20((arr8%5B0%5D*0x1000000)%20%2B%20(arr8%5B1%5D*0x10000)%20%2B%0A(arr8%5B2%5D*0x100)%20%2B%20(arr8%5B3%5D))%20%7B%0A%20%20%20%20case%200x12345678%3A%0A%20%20%20%20%20%20return%20BIG_ENDIAN%3B%0A%20%20%20%20case%200x78563412%3A%0A%20%20%20%20%20%20return%20LITTLE_ENDIAN%3B%0A%20%20%20%20default%3A%0A%20%20%20%20%20%20throw%20new%20Error('Unknown%20endianness')%3B%0A%20%20%7D%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%20BYTES_PER_ELEMENT%E5%B1%9E%E6%80%A7%0A%E6%AF%8F%E4%B8%80%E7%A7%8D%E8%A7%86%E5%9B%BE%E7%9A%84%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%8C%E9%83%BD%E6%9C%89%E4%B8%80%E4%B8%AA%20BYTES_PER_ELEMENT%20%E5%B1%9E%E6%80%A7%EF%BC%8C%E8%A1%A8%E7%A4%BA%E8%BF%99%20%E7%A7%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%8D%A0%E6%8D%AE%E7%9A%84%E5%AD%97%E8%8A%82%E6%95%B0%E3%80%82%0A%60%60%60js%0AInt8Array.BYTES_PER_ELEMENT%20%2F%2F%201%0AUint8Array.BYTES_PER_ELEMENT%20%2F%2F%201%0AInt16Array.BYTES_PER_ELEMENT%20%2F%2F%202%0AUint16Array.BYTES_PER_ELEMENT%20%2F%2F%202%0AInt32Array.BYTES_PER_ELEMENT%20%2F%2F%204%0AUint32Array.BYTES_PER_ELEMENT%20%2F%2F%204%0AFloat32Array.BYTES_PER_ELEMENT%20%2F%2F%204%0AFloat64Array.BYTES_PER_ELEMENT%20%2F%2F%208%0A%60%60%60%0A%E8%BF%99%E4%B8%AA%E5%B1%9E%E6%80%A7%E5%9C%A8TypedArray%E5%AE%9E%E4%BE%8B%E4%B8%8A%E4%B9%9F%E8%83%BD%E8%8E%B7%E5%8F%96%EF%BC%8C%E5%8D%B3%E6%9C%89%20TypedArray.prototype.BYTES_PER_ELEMENT%20%E3%80%82%0A%0A%23%23%23%23%20ArrayBuffer%E4%B8%8E%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E4%BA%92%E7%9B%B8%E8%BD%AC%E6%8D%A2%0AArrayBuffer%20%E8%BD%AC%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E6%88%96%E8%80%85%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E4%B8%BA%20ArrayBuffer%20%EF%BC%8C%E6%9C%89%E4%B8%80%E4%B8%AA%E5%89%8D%20%E6%8F%90%EF%BC%8C%E5%8D%B3%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E7%BC%96%E7%A0%81%E6%96%B9%E6%B3%95%E6%98%AF%E7%A1%AE%E5%AE%9A%E7%9A%84%E3%80%82%E5%81%87%E5%AE%9A%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%87%87%E7%94%A8%20UTF-16%20%E7%BC%96%E7%A0%81%20(JavaScript%20%E7%9A%84%E5%86%85%E9%83%A8%E7%BC%96%E7%A0%81%E6%96%B9%E5%BC%8F)%EF%BC%8C%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%B7%B1%E7%BC%96%E5%86%99%E8%BD%AC%E6%8D%A2%E5%87%BD%E6%95%B0%E3%80%82%0A%60%60%60js%0A%2F%2F%20ArrayBuffer%20%E8%BD%AC%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E5%8F%82%E6%95%B0%E4%B8%BA%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%20function%20ab2str(buf)%20%7B%0A%2F%2F%20%E6%B3%A8%E6%84%8F%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%98%AF%E5%A4%A7%E5%9E%8B%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E7%BB%84%EF%BC%8C%E4%B8%BA%E4%BA%86%E9%81%BF%E5%85%8D%E6%BA%A2%E5%87%BA%EF%BC%8C%0A%2F%2F%20%E5%BF%85%E9%A1%BB%E4%B8%80%E4%B8%AA%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E5%9C%B0%E8%BD%AC%0Areturn%20String.fromCharCode.apply(null%2C%20new%0AUint16Array(buf))%3B%0A%7D%0A%2F%2F%20%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E4%B8%BA%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%8F%82%E6%95%B0%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%20function%20str2ab(str)%20%7B%0Aconst%20buf%20%3D%20new%20ArrayBuffer(str.length%20*%202)%3B%20%2F%2F%20%E6%AF%8F%E4%B8%AA%E5%AD%97%E7%AC%A6%20%E5%8D%A0%E7%94%A82%E4%B8%AA%E5%AD%97%E8%8A%82%0A%20%20const%20bufView%20%3D%20new%20Uint16Array(buf)%3B%0A%20%20for%20(let%20i%20%3D%200%2C%20strLen%20%3D%20str.length%3B%20i%20%3C%20strLen%3B%20i%2B%2B)%0A%7B%0A%20%20%20%20bufView%5Bi%5D%20%3D%20str.charCodeAt(i)%3B%0A%20%20%7D%0Areturn%20buf%3B%20%7D%0A%60%60%60%0A%0A%23%23%23%23%23%20%E6%BA%A2%E5%87%BA%0A%E4%B8%8D%E5%90%8C%E7%9A%84%E8%A7%86%E5%9B%BE%E7%B1%BB%E5%9E%8B%EF%BC%8C%E6%89%80%E8%83%BD%E5%AE%B9%E7%BA%B3%E7%9A%84%E6%95%B0%E5%80%BC%E8%8C%83%E5%9B%B4%E6%98%AF%E7%A1%AE%E5%AE%9A%E7%9A%84%E3%80%82%E8%B6%85%E5%87%BA%E8%BF%99%E4%B8%AA%E8%8C%83%E5%9B%B4%EF%BC%8C%E5%B0%B1%E4%BC%9A%20%E5%87%BA%E7%8E%B0%E6%BA%A2%E5%87%BA%E3%80%82%0ATypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E6%BA%A2%E5%87%BA%E5%A4%84%E7%90%86%E8%A7%84%E5%88%99%EF%BC%8C%E7%AE%80%E5%8D%95%E6%9D%A5%E8%AF%B4%EF%BC%8C%E5%B0%B1%E6%98%AF%E6%8A%9B%E5%BC%83%E6%BA%A2%E5%87%BA%E7%9A%84%E4%BD%8D%EF%BC%8C%E7%84%B6%E5%90%8E%20%E6%8C%89%E7%85%A7%E8%A7%86%E5%9B%BE%E7%B1%BB%E5%9E%8B%E8%BF%9B%E8%A1%8C%E8%A7%A3%E9%87%8A%E3%80%82%0A%60%60%60js%0Aconst%20uint8%20%3D%20new%20Uint8Array(1)%3B%0Auint8%5B0%5D%20%3D%20256%3B%0Auint8%5B0%5D%20%2F%2F%200%0Auint8%5B0%5D%20%3D%20-1%3B%0Auint8%5B0%5D%20%2F%2F%20255%0A%60%60%60%0A%0A%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99%EF%BC%8C%E5%8F%AF%E4%BB%A5%E8%BF%99%E6%A0%B7%E8%A1%A8%E7%A4%BA%E3%80%82%0A%E6%AD%A3%E5%90%91%E6%BA%A2%E5%87%BA(overflow)%3A%E5%BD%93%E8%BE%93%E5%85%A5%E5%80%BC%E5%A4%A7%E4%BA%8E%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%9C%80%E5%A4%A7%E5%80%BC%EF%BC%8C%E7%BB%93%E6%9E%9C%20%E7%AD%89%E4%BA%8E%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%9C%80%E5%B0%8F%E5%80%BC%E5%8A%A0%E4%B8%8A%E4%BD%99%E5%80%BC%EF%BC%8C%E5%86%8D%E5%87%8F%E5%8E%BB1%E3%80%82%20%0A%E8%B4%9F%E5%90%91%E6%BA%A2%E5%87%BA(underflow)%3A%E5%BD%93%E8%BE%93%E5%85%A5%E5%80%BC%E5%B0%8F%E4%BA%8E%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%9C%80%E5%B0%8F%E5%80%BC%EF%BC%8C%E7%BB%93%20%E6%9E%9C%E7%AD%89%E4%BA%8E%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%9C%80%E5%A4%A7%E5%80%BC%E5%87%8F%E5%8E%BB%E4%BD%99%E5%80%BC%EF%BC%8C%E5%86%8D%E5%8A%A0%E4%B8%8A1%E3%80%82%0A%0AUint8ClampedArray%20%E8%A7%86%E5%9B%BE%E7%9A%84%E6%BA%A2%E5%87%BA%E8%A7%84%E5%88%99%EF%BC%8C%E4%B8%8E%E4%B8%8A%E9%9D%A2%E7%9A%84%E8%A7%84%E5%88%99%E4%B8%8D%E5%90%8C%E3%80%82%E5%AE%83%E8%A7%84%E5%AE%9A%EF%BC%8C%20%E5%87%A1%E6%98%AF%E5%8F%91%E7%94%9F%E6%AD%A3%E5%90%91%E6%BA%A2%E5%87%BA%EF%BC%8C%E8%AF%A5%E5%80%BC%E4%B8%80%E5%BE%8B%E7%AD%89%E4%BA%8E%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%9C%80%E5%A4%A7%E5%80%BC%EF%BC%8C%E5%8D%B3255%3B%E5%A6%82%E6%9E%9C%20%E5%8F%91%E7%94%9F%E8%B4%9F%E5%90%91%E6%BA%A2%E5%87%BA%EF%BC%8C%E8%AF%A5%E5%80%BC%E4%B8%80%E5%BE%8B%E7%AD%89%E4%BA%8E%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%9C%80%E5%B0%8F%E5%80%BC%EF%BC%8C%E5%8D%B30%E3%80%82%0A%60%60%60js%0Aconst%20uint8c%20%3D%20new%20Uint8ClampedArray(1)%3B%0Auint8c%5B0%5D%20%3D%20256%3B%0Auint8c%5B0%5D%20%2F%2F%20255%0Auint8c%5B0%5D%20%3D%20-1%3B%0Auint8c%5B0%5D%20%2F%2F%200%0A%60%60%60%0A%0A%23%23%23%23%23%20TypedArray.prototype.buffer%0ATypedArray%E5%AE%9E%E4%BE%8B%E7%9A%84%20buffer%20%E5%B1%9E%E6%80%A7%EF%BC%8C%E8%BF%94%E5%9B%9E%E6%95%B4%E6%AE%B5%E5%86%85%E5%AD%98%E5%8C%BA%E5%9F%9F%E5%AF%B9%E5%BA%94%20%E7%9A%84%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E3%80%82%E8%AF%A5%E5%B1%9E%E6%80%A7%E4%B8%BA%E5%8F%AA%E8%AF%BB%E5%B1%9E%E6%80%A7%E3%80%82%0A%60%60%60js%0Aconst%20a%20%3D%20new%20Float32Array(64)%3B%0Aconst%20b%20%3D%20new%20Uint8Array(a.buffer)%3B%0A%60%60%60%0A%E4%B8%8A%E9%9D%A2%E4%BB%A3%E7%A0%81%E7%9A%84%20a%20%E8%A7%86%E5%9B%BE%E5%AF%B9%E8%B1%A1%E5%92%8C%20b%20%E8%A7%86%E5%9B%BE%E5%AF%B9%E8%B1%A1%EF%BC%8C%E5%AF%B9%E5%BA%94%E5%90%8C%E4%B8%80%E4%B8%AA%20ArrayBuffer%20%E5%AF%B9%20%E8%B1%A1%EF%BC%8C%E5%8D%B3%E5%90%8C%E4%B8%80%E6%AE%B5%E5%86%85%E5%AD%98%E3%80%82%0A%0A%0A%23%23%23%23%23%20TypedArray.prototype.byteLength%EF%BC%8C%20TypedArray.prototype.byteOffset%0A%0AbyteLength%20%E5%B1%9E%E6%80%A7%E8%BF%94%E5%9B%9ETypedArray%E6%95%B0%E7%BB%84%E5%8D%A0%E6%8D%AE%E7%9A%84%E5%86%85%E5%AD%98%E9%95%BF%E5%BA%A6%EF%BC%8C%E5%8D%95%E4%BD%8D%E4%B8%BA%E5%AD%97%20%E8%8A%82%E3%80%82%20byteOffset%20%E5%B1%9E%E6%80%A7%E8%BF%94%E5%9B%9ETypedArray%E6%95%B0%E7%BB%84%E4%BB%8E%E5%BA%95%E5%B1%82%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%20%E7%9A%84%E5%93%AA%E4%B8%AA%E5%AD%97%E8%8A%82%E5%BC%80%E5%A7%8B%E3%80%82%E8%BF%99%E4%B8%A4%E4%B8%AA%E5%B1%9E%E6%80%A7%E9%83%BD%E6%98%AF%E5%8F%AA%E8%AF%BB%E5%B1%9E%E6%80%A7%E3%80%82%0A%60%60%60js%0Aconst%20b%20%3D%20new%20ArrayBuffer(8)%3B%0Aconst%20v1%20%3D%20new%20Int32Array(b)%3B%0Aconst%20v2%20%3D%20new%20Uint8Array(b%2C%202)%3B%0Aconst%20v3%20%3D%20new%20Int16Array(b%2C%202%2C%202)%3B%0Av1.byteLength%20%2F%2F%208%0Av2.byteLength%20%2F%2F%206%0Av3.byteLength%20%2F%2F%204%0Av1.byteOffset%20%2F%2F%200%0Av2.byteOffset%20%2F%2F%202%0Av3.byteOffset%20%2F%2F%202%0A%60%60%60%0A%0A%23%23%23%23%23%20TypedArray.prototype.length%0Alength%20%E5%B1%9E%E6%80%A7%E8%A1%A8%E7%A4%BATypedArray%E6%95%B0%E7%BB%84%E5%90%AB%E6%9C%89%E5%A4%9A%E5%B0%91%E4%B8%AA%E6%88%90%E5%91%98%E3%80%82%E6%B3%A8%E6%84%8F%E5%B0%86%20byteLength%20%E5%B1%9E%E6%80%A7%E5%92%8C%20length%20%E5%B1%9E%E6%80%A7%E5%8C%BA%E5%88%86%EF%BC%8C%E5%89%8D%E8%80%85%E6%98%AF%E5%AD%97%E8%8A%82%E9%95%BF%E5%BA%A6%EF%BC%8C%E5%90%8E%E8%80%85%E6%98%AF%E6%88%90%20%E5%91%98%E9%95%BF%E5%BA%A6%E3%80%82%0A%60%60%60js%0Aconst%20a%20%3D%20new%20Int16Array(8)%3B%0Aa.length%20%2F%2F%208%0Aa.byteLength%20%2F%2F%2016%0A%60%60%60%0A%0A%23%23%23%23%23%20TypedArray.prototype.set()%0ATypedArray%E6%95%B0%E7%BB%84%E7%9A%84%20set%20%E6%96%B9%E6%B3%95%E7%94%A8%E4%BA%8E%E5%A4%8D%E5%88%B6%E6%95%B0%E7%BB%84(%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84%E6%88%96TypedArray%E6%95%B0%20%E7%BB%84)%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E5%B0%86%E4%B8%80%E6%AE%B5%E5%86%85%E5%AE%B9%E5%AE%8C%E5%85%A8%E5%A4%8D%E5%88%B6%E5%88%B0%E5%8F%A6%E4%B8%80%E6%AE%B5%E5%86%85%E5%AD%98%E3%80%82%0A%60%60%60js%0Aconst%20a%20%3D%20new%20Uint8Array(8)%3B%0Aconst%20b%20%3D%20new%20Uint8Array(8)%3B%0Ab.set(a)%3B%0A%0A%0A%2F%2Fset%20%E6%96%B9%E6%B3%95%E8%BF%98%E5%8F%AF%E4%BB%A5%E6%8E%A5%E5%8F%97%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%8C%E8%A1%A8%E7%A4%BA%E4%BB%8E%20b%20%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%93%AA%E4%B8%80%E4%B8%AA%E6%88%90%E5%91%98%E5%BC%80%E5%A7%8B%E5%A4%8D%E5%88%B6%20a%20%E5%AF%B9%E8%B1%A1%E3%80%82%0Aconst%20a%20%3D%20new%20Uint16Array(8)%3B%0Aconst%20b%20%3D%20new%20Uint16Array(10)%3B%0Ab.set(a%2C%202)%0A%60%60%60%0A%0A%23%23%23%23%23%20TypedArray.prototype.subarray()%0Asubarray%20%E6%96%B9%E6%B3%95%E6%98%AF%E5%AF%B9%E4%BA%8ETypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E4%B8%80%E9%83%A8%E5%88%86%EF%BC%8C%E5%86%8D%E5%BB%BA%E7%AB%8B%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E8%A7%86%E5%9B%BE%E3%80%82%0A%60%60%60js%0Aconst%20a%20%3D%20new%20Uint16Array(8)%3B%0Aconst%20b%20%3D%20a.subarray(2%2C3)%3B%0Aa.byteLength%20%2F%2F%2016%0Ab.byteLength%20%2F%2F%202%0A%60%60%60%0Asubarray%20%E6%96%B9%E6%B3%95%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%98%AF%E8%B5%B7%E5%A7%8B%E7%9A%84%E6%88%90%E5%91%98%E5%BA%8F%E5%8F%B7%EF%BC%8C%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E6%98%AF%E7%BB%93%E6%9D%9F%E7%9A%84%20%E6%88%90%E5%91%98%E5%BA%8F%E5%8F%B7(%E4%B8%8D%E5%90%AB%E8%AF%A5%E6%88%90%E5%91%98)%EF%BC%8C%E5%A6%82%E6%9E%9C%E7%9C%81%E7%95%A5%E5%88%99%E5%8C%85%E5%90%AB%E5%89%A9%E4%BD%99%E7%9A%84%E5%85%A8%E9%83%A8%E6%88%90%E5%91%98%E3%80%82%0A%0A%0A%23%23%23%23%23%20TypedArray.prototype.slice()%0ATypeArray%E5%AE%9E%E4%BE%8B%E7%9A%84%20slice%20%E6%96%B9%E6%B3%95%EF%BC%8C%E5%8F%AF%E4%BB%A5%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%8C%87%E5%AE%9A%E4%BD%8D%E7%BD%AE%E7%9A%84%E6%96%B0%E7%9A%84%20TypedArray%E5%AE%9E%E4%BE%8B%E3%80%82%0A%60%60%60js%0Alet%20ui8%20%3D%20Uint8Array.of(0%2C%201%2C%202)%3B%0Aui8.slice(-1)%0A%2F%2F%20Uint8Array%20%5B%202%20%5D%0A%60%60%60%0Aslice%20%E6%96%B9%E6%B3%95%E7%9A%84%E5%8F%82%E6%95%B0%EF%BC%8C%E8%A1%A8%E7%A4%BA%E5%8E%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%B7%E4%BD%93%E4%BD%8D%E7%BD%AE%EF%BC%8C%E5%BC%80%E5%A7%8B%E7%94%9F%E6%88%90%E6%96%B0%E6%95%B0%E7%BB%84%E3%80%82%E8%B4%9F%E5%80%BC%20%E8%A1%A8%E7%A4%BA%E9%80%86%E5%90%91%E7%9A%84%E4%BD%8D%E7%BD%AE%0A%0A%23%23%23%23%23%20TypedArray.of()%0ATypedArray%E6%95%B0%E7%BB%84%E7%9A%84%E6%89%80%E6%9C%89%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%EF%BC%8C%E9%83%BD%E6%9C%89%E4%B8%80%E4%B8%AA%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%20of%20%EF%BC%8C%E7%94%A8%E4%BA%8E%E5%B0%86%E5%8F%82%E6%95%B0%20%E8%BD%AC%E4%B8%BA%E4%B8%80%E4%B8%AATypedArray%E5%AE%9E%E4%BE%8B%E3%80%82%0A%60%60%60js%0AFloat32Array.of(0.151%2C%20-8%2C%203.7)%0A%2F%2F%20Float32Array%20%5B%200.151%2C%20-8%2C%203.7%20%5D%0A%60%60%60%0A%0A%23%23%23%23%23%20TypedArray.from()%0A%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%20from%20%E6%8E%A5%E5%8F%97%E4%B8%80%E4%B8%AA%E5%8F%AF%E9%81%8D%E5%8E%86%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84(%E6%AF%94%E5%A6%82%E6%95%B0%E7%BB%84)%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%EF%BC%8C%E8%BF%94%20%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%9F%BA%E4%BA%8E%E8%BF%99%E4%B8%AA%E7%BB%93%E6%9E%84%E7%9A%84TypedArray%E5%AE%9E%E4%BE%8B%0A%60%60%60js%0AUint16Array.from(%5B0%2C%201%2C%202%5D)%0A%2F%2F%20Uint16Array%20%5B%200%2C%201%2C%202%20%5D%0A%0A%2F%2F%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%E8%BF%98%E5%8F%AF%E4%BB%A5%E5%B0%86%E4%B8%80%E7%A7%8DTypedArray%E5%AE%9E%E4%BE%8B%EF%BC%8C%E8%BD%AC%E4%B8%BA%E5%8F%A6%E4%B8%80%E7%A7%8D%E3%80%82%0Aconst%20ui16%20%3D%20Uint16Array.from(Uint8Array.of(0%2C%201%2C%202))%3B%0Aui16%20instanceof%20Uint16Array%20%2F%2F%20true%0A%0A%2F%2Ffrom%20%E6%96%B9%E6%B3%95%E8%BF%98%E5%8F%AF%E4%BB%A5%E6%8E%A5%E5%8F%97%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%8C%E4%BD%9C%E4%B8%BA%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%8C%E7%94%A8%E6%9D%A5%E5%AF%B9%E6%AF%8F%E4%B8%AA%E5%85%83%E7%B4%A0%E8%BF%9B%20%E8%A1%8C%E9%81%8D%E5%8E%86%EF%BC%8C%E5%8A%9F%E8%83%BD%E7%B1%BB%E4%BC%BC%20map%20%E6%96%B9%E6%B3%95%E3%80%82%0AInt8Array.of(127%2C%20126%2C%20125).map(x%20%3D%3E%202%20*%20x)%0A%2F%2F%20Int8Array%20%5B%20-2%2C%20-4%2C%20-6%20%5D%0AInt16Array.from(Int8Array.of(127%2C%20126%2C%20125)%2C%20x%20%3D%3E%202%20*%20x)%0A%2F%2F%20Int16Array%20%5B%20254%2C%20252%2C%20250%20%5D%0A%60%60%60%0A%0A%23%23%23%23%23%20%E5%A4%8D%E5%90%88%E8%A7%86%E5%9B%BE%0A%E7%94%B1%E4%BA%8E%E8%A7%86%E5%9B%BE%E7%9A%84%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%8F%AF%E4%BB%A5%E6%8C%87%E5%AE%9A%E8%B5%B7%E5%A7%8B%E4%BD%8D%E7%BD%AE%E5%92%8C%E9%95%BF%E5%BA%A6%EF%BC%8C%E6%89%80%E4%BB%A5%E5%9C%A8%E5%90%8C%E4%B8%80%E6%AE%B5%E5%86%85%E5%AD%98%E4%B9%8B%20%E4%B8%AD%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BE%9D%E6%AC%A1%E5%AD%98%E6%94%BE%E4%B8%8D%E5%90%8C%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%BF%99%E5%8F%AB%E5%81%9A%E2%80%9C%E5%A4%8D%E5%90%88%E8%A7%86%E5%9B%BE%E2%80%9D%E3%80%82%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(24)%3B%0Aconst%20idView%20%3D%20new%20Uint32Array(buffer%2C%200%2C%201)%3B%0Aconst%20usernameView%20%3D%20new%20Uint8Array(buffer%2C%204%2C%2016)%3B%0Aconst%20amountDueView%20%3D%20new%20Float32Array(buffer%2C%2020%2C%201)%3B%0A%60%60%60%0A%0A%23%23%23%23%20DataView%E8%A7%86%E5%9B%BE%0A%E5%A6%82%E6%9E%9C%E4%B8%80%E6%AE%B5%E6%95%B0%E6%8D%AE%E5%8C%85%E6%8B%AC%E5%A4%9A%E7%A7%8D%E7%B1%BB%E5%9E%8B(%E6%AF%94%E5%A6%82%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BC%A0%E6%9D%A5%E7%9A%84HTTP%E6%95%B0%E6%8D%AE)%EF%BC%8C%E8%BF%99%E6%97%B6%E9%99%A4%E4%BA%86%20%E5%BB%BA%E7%AB%8B%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%A4%8D%E5%90%88%E8%A7%86%E5%9B%BE%E4%BB%A5%E5%A4%96%EF%BC%8C%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20DataView%20%E8%A7%86%E5%9B%BE%20%E8%BF%9B%E8%A1%8C%E6%93%8D%E4%BD%9C%E3%80%82DataView%20%E8%A7%86%E5%9B%BE%E6%8F%90%E4%BE%9B%E6%9B%B4%E5%A4%9A%E6%93%8D%E4%BD%9C%E9%80%89%E9%A1%B9%EF%BC%8C%E8%80%8C%E4%B8%94%E6%94%AF%E6%8C%81%E8%AE%BE%E5%AE%9A%E5%AD%97%E8%8A%82%E5%BA%8F%0A%23%23%23%23%23%20%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%0ADataView(ArrayBuffer%20buffer%20%5B%2C%20%E5%AD%97%E8%8A%82%E8%B5%B7%E5%A7%8B%E4%BD%8D%E7%BD%AE%20%5B%2C%20%E9%95%BF%E5%BA%A6%5D%5D)%3B%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(24)%3B%0Aconst%20dv%20%3D%20new%20DataView(buffer)%3B%0A%60%60%60%0ADataView%20%E5%AE%9E%E4%BE%8B%E6%9C%89%E4%BB%A5%E4%B8%8B%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%90%AB%E4%B9%89%E4%B8%8ETypedArray%E5%AE%9E%E4%BE%8B%E7%9A%84%E5%90%8C%E5%90%8D%E6%96%B9%E6%B3%95%E7%9B%B8%E5%90%8C%3A%0A1.DataView.prototype.buffer%20%3A%E8%BF%94%E5%9B%9E%E5%AF%B9%E5%BA%94%E7%9A%84ArrayBuffer%E5%AF%B9%E8%B1%A1%202.DataView.prototype.byteLength%20%3A%E8%BF%94%E5%9B%9E%E5%8D%A0%E6%8D%AE%E7%9A%84%E5%86%85%E5%AD%98%E5%AD%97%E8%8A%82%E9%95%BF%E5%BA%A6%203.DataView.prototype.byteOffset%20%3A%E8%BF%94%E5%9B%9E%E5%BD%93%E5%89%8D%E8%A7%86%E5%9B%BE%E4%BB%8E%E5%AF%B9%E5%BA%94%E7%9A%84ArrayBuffer%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%93%AA%E4%B8%AA%E5%AD%97%E8%8A%82%E5%BC%80%E5%A7%8B%0A%0A%0ADataView%20%E5%AE%9E%E4%BE%8B%E6%8F%90%E4%BE%9B8%E4%B8%AA%E6%96%B9%E6%B3%95%E8%AF%BB%E5%8F%96%E5%86%85%E5%AD%98%3A%0A1.getInt8%20%3A%E8%AF%BB%E5%8F%961%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA8%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A2.getUint8%20%3A%E8%AF%BB%E5%8F%961%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%97%A0%E7%AC%A6%E5%8F%B7%E7%9A%848%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A3.getInt16%20%3A%E8%AF%BB%E5%8F%962%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA16%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A4.getUint16%20%3A%E8%AF%BB%E5%8F%962%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%97%A0%E7%AC%A6%E5%8F%B7%E7%9A%8416%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A5.getInt32%20%3A%E8%AF%BB%E5%8F%964%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA32%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A6.getUint32%20%3A%E8%AF%BB%E5%8F%964%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E6%97%A0%E7%AC%A6%E5%8F%B7%E7%9A%8432%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A7.getFloat32%20%3A%E8%AF%BB%E5%8F%964%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA32%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%E3%80%82%0A8.getFloat64%20%3A%E8%AF%BB%E5%8F%968%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA64%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%E3%80%82%0A%E8%BF%99%E4%B8%80%E7%B3%BB%E5%88%97%20get%20%E6%96%B9%E6%B3%95%E7%9A%84%E5%8F%82%E6%95%B0%E9%83%BD%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AD%97%E8%8A%82%E5%BA%8F%E5%8F%B7(%E4%B8%8D%E8%83%BD%E6%98%AF%E8%B4%9F%E6%95%B0%EF%BC%8C%E5%90%A6%E5%88%99%E4%BC%9A%E6%8A%A5%E9%94%99)%EF%BC%8C%E8%A1%A8%E7%A4%BA%E4%BB%8E%E5%93%AA%E4%B8%AA%E5%AD%97%E8%8A%82%E5%BC%80%E5%A7%8B%E8%AF%BB%E5%8F%96%E3%80%82%0A%60%60%60js%0Aconst%20buffer%20%3D%20new%20ArrayBuffer(24)%3B%0Aconst%20dv%20%3D%20new%20DataView(buffer)%3B%0A%2F%2F%20%E4%BB%8E%E7%AC%AC1%E4%B8%AA%E5%AD%97%E8%8A%82%E8%AF%BB%E5%8F%96%E4%B8%80%E4%B8%AA8%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%0Aconst%20v1%20%3D%20dv.getUint8(0)%3B%0A%2F%2F%20%E4%BB%8E%E7%AC%AC2%E4%B8%AA%E5%AD%97%E8%8A%82%E8%AF%BB%E5%8F%96%E4%B8%80%E4%B8%AA16%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%0Aconst%20v2%20%3D%20dv.getUint16(1)%3B%0A%2F%2F%20%E4%BB%8E%E7%AC%AC4%E4%B8%AA%E5%AD%97%E8%8A%82%E8%AF%BB%E5%8F%96%E4%B8%80%E4%B8%AA16%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%0Aconst%20v3%20%3D%20dv.getUint16(3)%3B%0A%60%60%60%0A%E5%A6%82%E6%9E%9C%E4%B8%80%E6%AC%A1%E8%AF%BB%E5%8F%96%E4%B8%A4%E4%B8%AA%E6%88%96%E4%B8%A4%E4%B8%AA%E4%BB%A5%E4%B8%8A%E5%AD%97%E8%8A%82%EF%BC%8C%E5%B0%B1%E5%BF%85%E9%A1%BB%E6%98%8E%E7%A1%AE%E6%95%B0%E6%8D%AE%E7%9A%84%E5%AD%98%E5%82%A8%E6%96%B9%E5%BC%8F%EF%BC%8C%E5%88%B0%E5%BA%95%20%E6%98%AF%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E8%BF%98%E6%98%AF%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E3%80%82%E9%BB%98%E8%AE%A4%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%20DataView%20%E7%9A%84%20get%20%E6%96%B9%E6%B3%95%20%E4%BD%BF%E7%94%A8%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E8%A7%A3%E8%AF%BB%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%A6%82%E6%9E%9C%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E8%A7%A3%E8%AF%BB%EF%BC%8C%E5%BF%85%E9%A1%BB%E5%9C%A8%20get%20%E6%96%B9%E6%B3%95%E7%9A%84%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E6%8C%87%E5%AE%9A%20true%20%E3%80%82%0A%60%60%60js%0A%2F%2F%20%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%0Aconst%20v1%20%3D%20dv.getUint16(1%2C%20true)%3B%20%2F%2F%20%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%0Aconst%20v2%20%3D%20dv.getUint16(3%2C%20false)%3B%0A%2F%2F%20%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%0Aconst%20v3%20%3D%20dv.getUint16(3)%3B%0A%60%60%60%0A%0ADataView%E8%A7%86%E5%9B%BE%E6%8F%90%E4%BE%9B8%E4%B8%AA%E6%96%B9%E6%B3%95%E5%86%99%E5%85%A5%E5%86%85%E5%AD%98%3A%0A1.setInt8%20%3A%E5%86%99%E5%85%A51%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%848%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%0A2.setUint8%20%3A%E5%86%99%E5%85%A51%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%848%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%E3%80%82%20%0A3.setInt16%20%3A%E5%86%99%E5%85%A52%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8416%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%20%0A4.setUint16%20%3A%E5%86%99%E5%85%A52%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8416%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%E3%80%82%20%0A5.setInt32%20%3A%E5%86%99%E5%85%A54%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8432%E4%BD%8D%E6%95%B4%E6%95%B0%E3%80%82%20%0A6.setUint32%20%3A%E5%86%99%E5%85%A54%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8432%E4%BD%8D%E6%97%A0%E7%AC%A6%E5%8F%B7%E6%95%B4%E6%95%B0%E3%80%82%20%0A7.setFloat32%20%3A%E5%86%99%E5%85%A54%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8432%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%E3%80%82%20%0A8.setFloat64%20%3A%E5%86%99%E5%85%A58%E4%B8%AA%E5%AD%97%E8%8A%82%E7%9A%8464%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%E3%80%82%0A%E8%BF%99%E4%B8%80%E7%B3%BB%E5%88%97%20set%20%E6%96%B9%E6%B3%95%EF%BC%8C%E6%8E%A5%E5%8F%97%E4%B8%A4%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%8C%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E6%98%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%8F%B7%EF%BC%8C%E8%A1%A8%E7%A4%BA%E4%BB%8E%E5%93%AA%20%E4%B8%AA%E5%AD%97%E8%8A%82%E5%BC%80%E5%A7%8B%E5%86%99%E5%85%A5%EF%BC%8C%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E4%B8%BA%E5%86%99%E5%85%A5%E7%9A%84%E6%95%B0%E6%8D%AE%E3%80%82%E5%AF%B9%E4%BA%8E%E9%82%A3%E4%BA%9B%E5%86%99%E5%85%A5%E4%B8%A4%E4%B8%AA%E6%88%96%E4%B8%A4%E4%B8%AA%20%E4%BB%A5%E4%B8%8A%E5%AD%97%E8%8A%82%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E9%9C%80%E8%A6%81%E6%8C%87%E5%AE%9A%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%8C%20false%20%E6%88%96%E8%80%85%20undefined%20%E8%A1%A8%E7%A4%BA%20%E4%BD%BF%E7%94%A8%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%86%99%E5%85%A5%EF%BC%8C%20true%20%E8%A1%A8%E7%A4%BA%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%86%99%E5%85%A5%E3%80%82%0A%60%60%60js%0A%2F%2F%20%E5%9C%A8%E7%AC%AC1%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E4%BB%A5%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%86%99%E5%85%A5%E5%80%BC%E4%B8%BA25%E7%9A%8432%E4%BD%8D%E6%95%B4%E6%95%B0%0Adv.setInt32(0%2C%2025%2C%20false)%3B%0A%2F%2F%20%E5%9C%A8%E7%AC%AC5%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E4%BB%A5%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%86%99%E5%85%A5%E5%80%BC%E4%B8%BA25%E7%9A%8432%E4%BD%8D%E6%95%B4%E6%95%B0%0Adv.setInt32(4%2C%2025)%3B%0A%2F%2F%20%E5%9C%A8%E7%AC%AC9%E4%B8%AA%E5%AD%97%E8%8A%82%EF%BC%8C%E4%BB%A5%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%E5%86%99%E5%85%A5%E5%80%BC%E4%B8%BA2.5%E7%9A%8432%E4%BD%8D%E6%B5%AE%E7%82%B9%E6%95%B0%0Adv.setFloat32(8%2C%202.5%2C%20true)%3B%0A%60%60%60%0A%E5%A6%82%E6%9E%9C%E4%B8%8D%E7%A1%AE%E5%AE%9A%E6%AD%A3%E5%9C%A8%E4%BD%BF%E7%94%A8%E7%9A%84%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9A%84%E5%AD%97%E8%8A%82%E5%BA%8F%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%87%87%E7%94%A8%E4%B8%8B%E9%9D%A2%E7%9A%84%E5%88%A4%E6%96%AD%E6%96%B9%E5%BC%8F%E3%80%82%0A%60%60%60js%0Aconst%20littleEndian%20%3D%20(function()%20%7B%0A%20%20const%20buffer%20%3D%20new%20ArrayBuffer(2)%3B%0A%20%20new%20DataView(buffer).setInt16(0%2C%20256%2C%20true)%3B%0A%20%20return%20new%20Int16Array(buffer)%5B0%5D%20%3D%3D%3D%20256%3B%0A%7D)()%3B%0A%60%60%60%0A%E5%A6%82%E6%9E%9C%E8%BF%94%E5%9B%9E%20true%20%EF%BC%8C%E5%B0%B1%E6%98%AF%E5%B0%8F%E7%AB%AF%E5%AD%97%E8%8A%82%E5%BA%8F%3B%E5%A6%82%E6%9E%9C%E8%BF%94%E5%9B%9E%20false%20%EF%BC%8C%E5%B0%B1%E6%98%AF%E5%A4%A7%E7%AB%AF%E5%AD%97%E8%8A%82%20%E5%BA%8F%E3%80%82%0A%0A%23%23%23%23%20%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E7%BB%84%E7%9A%84%E5%BA%94%E7%94%A8%0A%E5%A4%A7%E9%87%8F%E7%9A%84Web%20API%E7%94%A8%E5%88%B0%E4%BA%86%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E5%92%8C%E5%AE%83%E7%9A%84%E8%A7%86%E5%9B%BE%E5%AF%B9%E8%B1%A1%E3%80%82%0A%23%23%23%23%23%20AJAX%0A%E4%BC%A0%E7%BB%9F%E4%B8%8A%EF%BC%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%80%9A%E8%BF%87AJAX%E6%93%8D%E4%BD%9C%E5%8F%AA%E8%83%BD%E8%BF%94%E5%9B%9E%E6%96%87%E6%9C%AC%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8D%B3%20responseType%20%E5%B1%9E%E6%80%A7%E9%BB%98%E8%AE%A4%E4%B8%BA%20text%20%E3%80%82%20XMLHttpRequest%20%E7%AC%AC%E4%BA%8C%E7%89%88%20XHR2%20%E5%85%81%E8%AE%B8%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%BF%94%E5%9B%9E%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%BF%99%E6%97%B6%E5%88%86%E6%88%90%E4%B8%A4%E7%A7%8D%E6%83%85%E5%86%B5%E3%80%82%E5%A6%82%E6%9E%9C%E6%98%8E%E7%A1%AE%E7%9F%A5%E9%81%93%E8%BF%94%E5%9B%9E%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%8F%AF%E4%BB%A5%E6%8A%8A%E8%BF%94%E5%9B%9E%E7%B1%BB%E5%9E%8B(%20responseType%20)%E8%AE%BE%E4%B8%BA%20arraybuffer%20%3B%E5%A6%82%E6%9E%9C%E4%B8%8D%E7%9F%A5%E9%81%93%EF%BC%8C%E5%B0%B1%E8%AE%BE%E4%B8%BA%20blob%20%E3%80%82%0A%60%60%60js%0Alet%20xhr%20%3D%20new%20XMLHttpRequest()%3B%0Axhr.open('GET'%2C%20someUrl)%3B%0Axhr.responseType%20%3D%20'arraybuffer'%3B%0Axhr.onload%20%3D%20function%20()%20%7B%0A%20%20let%20arrayBuffer%20%3D%20xhr.response%3B%0A%20%20%2F%2F%20%C2%B7%C2%B7%C2%B7%0A%7D%3B%0Axhr.send()%3B%0A%60%60%60%0A%0A%23%23%23%23%23%20Canvas%0A%E7%BD%91%E9%A1%B5%20Canvas%20%E5%85%83%E7%B4%A0%E8%BE%93%E5%87%BA%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%83%8F%E7%B4%A0%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%B0%B1%E6%98%AFTypedArray%E6%95%B0%E7%BB%84%E3%80%82%0A%60%60%60js%0Aconst%20canvas%20%3D%20document.getElementById('myCanvas')%3B%0Aconst%20ctx%20%3D%20canvas.getContext('2d')%3B%0Aconst%20imageData%20%3D%20ctx.getImageData(0%2C%200%2C%20canvas.width%2C%0Acanvas.height)%3B%0Aconst%20uint8ClampedArray%20%3D%20imageData.data%3B%0A%60%60%60%0AUint8ClampedArray%20%E7%B1%BB%E5%9E%8B%E7%A1%AE%E4%BF%9D%E5%B0%86%E5%B0%8F%E4%BA%8E0%E7%9A%84%E5%80%BC%E8%AE%BE%E4%B8%BA0%EF%BC%8C%E5%B0%86%E5%A4%A7%E4%BA%8E255%E7%9A%84%E5%80%BC%E8%AE%BE%E4%B8%BA%20255%E3%80%82%E6%B3%A8%E6%84%8F%EF%BC%8CIE%2010%E4%B8%8D%E6%94%AF%E6%8C%81%E8%AF%A5%E7%B1%BB%E5%9E%8B%E3%80%82%0A%0A%23%23%23%23%23%20WebSocket%0AWebSocket%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20ArrayBuffer%20%EF%BC%8C%E5%8F%91%E9%80%81%E6%88%96%E6%8E%A5%E6%94%B6%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E3%80%82%0A%60%60%60js%0Alet%20socket%20%3D%20new%20WebSocket('ws%3A%2F%2F127.0.0.1%3A8081')%3B%0Asocket.binaryType%20%3D%20'arraybuffer'%3B%0A%2F%2F%20Wait%20until%20socket%20is%20open%0Asocket.addEventListener('open'%2C%20function%20(event)%20%7B%0A%20%20%2F%2F%20Send%20binary%20data%0A%20%20const%20typedArray%20%3D%20new%20Uint8Array(4)%3B%0A%20%20socket.send(typedArray.buffer)%3B%0A%7D)%3B%0A%2F%2F%20Receive%20binary%20data%0Asocket.addEventListener('message'%2C%20function%20(event)%20%7B%0A%20%20const%20arrayBuffer%20%3D%20event.data%3B%0A%20%20%2F%2F%20%C2%B7%C2%B7%C2%B7%0A%7D)%3B%0A%60%60%60%0A%0A%23%23%23%23%23%20Fetch%20API%0AFetch%20API%E5%8F%96%E5%9B%9E%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%B0%B1%E6%98%AF%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E3%80%82%0A%60%60%60js%0Afetch(url)%0A.then(function(response)%7B%0A%20%20return%20response.arrayBuffer()%0A%7D)%0A.then(function(arrayBuffer)%7B%0A%20%20%2F%2F%20...%0A%7D)%3B%0A%60%60%60%0A%0A%23%23%23%23%23%20File%20API%0A%E5%A6%82%E6%9E%9C%E7%9F%A5%E9%81%93%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%B0%86%E8%BF%99%E4%B8%AA%E6%96%87%E4%BB%B6%E8%AF%BB%E5%8F%96%20%E4%B8%BA%20ArrayBuffer%20%E5%AF%B9%E8%B1%A1%E3%80%82%0A%60%60%60js%0Aconst%20fileInput%20%3D%20document.getElementById('fileInput')%3B%0Aconst%20file%20%3D%20fileInput.files%5B0%5D%3B%0Aconst%20reader%20%3D%20new%20FileReader()%3B%0Areader.readAsArrayBuffer(file)%3B%0Areader.onload%20%3D%20function%20()%20%7B%0A%20%20const%20arrayBuffer%20%3D%20reader.result%3B%0A%20%20%2F%2F%20%C2%B7%C2%B7%C2%B7%0A%7D%3B%0A%60%60%60%0A%0A%23%23%23%23%23%20SharedArrayBuffer%0AJavaScript%20%E6%98%AF%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%EF%BC%8CWeb%20worker%20%E5%BC%95%E5%85%A5%E4%BA%86%E5%A4%9A%E7%BA%BF%E7%A8%8B%3A%E4%B8%BB%E7%BA%BF%E7%A8%8B%E7%94%A8%E6%9D%A5%E4%B8%8E%E7%94%A8%E6%88%B7%E4%BA%92%20%E5%8A%A8%EF%BC%8CWorker%20%E7%BA%BF%E7%A8%8B%E7%94%A8%E6%9D%A5%E6%89%BF%E6%8B%85%E8%AE%A1%E7%AE%97%E4%BB%BB%E5%8A%A1%E3%80%82%E6%AF%8F%E4%B8%AA%E7%BA%BF%E7%A8%8B%E7%9A%84%E6%95%B0%E6%8D%AE%E9%83%BD%E6%98%AF%E9%9A%94%E7%A6%BB%E7%9A%84%EF%BC%8C%E9%80%9A%0A%E8%BF%87%20postMessage()%20%E9%80%9A%E4%BF%A1%E3%80%82%0A%E7%BA%BF%E7%A8%8B%E4%B9%8B%E9%97%B4%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BA%A4%E6%8D%A2%E5%8F%AF%E4%BB%A5%E6%98%AF%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F%EF%BC%8C%E4%B8%8D%E4%BB%85%E4%BB%85%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E4%BA%8C%E8%BF%9B%20%E5%88%B6%E6%95%B0%E6%8D%AE%E3%80%82%E8%BF%99%E7%A7%8D%E4%BA%A4%E6%8D%A2%E9%87%87%E7%94%A8%E7%9A%84%E6%98%AF%E5%A4%8D%E5%88%B6%E6%9C%BA%E5%88%B6%EF%BC%8C%E5%8D%B3%E4%B8%80%E4%B8%AA%E8%BF%9B%E7%A8%8B%E5%B0%86%E9%9C%80%E8%A6%81%E5%88%86%E4%BA%AB%E7%9A%84%E6%95%B0%E6%8D%AE%E5%A4%8D%20%E5%88%B6%E4%B8%80%E4%BB%BD%EF%BC%8C%E9%80%9A%E8%BF%87%20postMessage%20%E6%96%B9%E6%B3%95%E4%BA%A4%E7%BB%99%E5%8F%A6%E4%B8%80%E4%B8%AA%E8%BF%9B%E7%A8%8B%E3%80%82%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E9%87%8F%E6%AF%94%E8%BE%83%E5%A4%A7%EF%BC%8C%E8%BF%99%E7%A7%8D%E9%80%9A%E4%BF%A1%E7%9A%84%E6%95%88%E7%8E%87%E6%98%BE%E7%84%B6%E6%AF%94%E8%BE%83%E4%BD%8E%E3%80%82%0A%E8%BF%99%E6%97%B6%E5%8F%AF%E4%BB%A5%E7%95%99%E5%87%BA%E4%B8%80%E5%9D%97%E5%86%85%E5%AD%98%E5%8C%BA%E5%9F%9F%EF%BC%8C%E7%94%B1%E4%B8%BB%E7%BA%BF%E7%A8%8B%E4%B8%8E%20Worker%20%E7%BA%BF%E7%A8%8B%E5%85%B1%E4%BA%AB%EF%BC%8C%E4%B8%A4%E6%96%B9%E9%83%BD%E5%8F%AF%E4%BB%A5%E8%AF%BB%E5%86%99%EF%BC%8C%E9%82%A3%E4%B9%88%E5%B0%B1%E4%BC%9A%E5%A4%A7%E5%A4%A7%E6%8F%90%20%E9%AB%98%E6%95%88%E7%8E%87%EF%BC%8C%E5%8D%8F%E4%BD%9C%E8%B5%B7%E6%9D%A5%E4%B9%9F%E4%BC%9A%E6%AF%94%E8%BE%83%E7%AE%80%E5%8D%95%E3%80%82%0AES2017%20%E5%BC%95%E5%85%A5%20SharedArrayBuffer%20%EF%BC%8C%E5%85%81%E8%AE%B8%20Worker%20%E7%BA%BF%E7%A8%8B%E4%B8%8E%E4%B8%BB%E7%BA%BF%E7%A8%8B%E5%85%B1%E4%BA%AB%E5%90%8C%20%E4%B8%80%E5%9D%97%E5%86%85%E5%AD%98%E3%80%82SharedArrayBuffer%20%E7%9A%84%20API%20%E4%B8%8E%20ArrayBuffer%20%E4%B8%80%E6%A8%A1%E4%B8%80%E6%A0%B7%EF%BC%8C%20%E5%94%AF%E4%B8%80%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E5%90%8E%E8%80%85%E6%97%A0%E6%B3%95%E5%85%B1%E4%BA%AB%E3%80%82%0A%60%60%60%0A%2F%2F%20%E5%88%86%E9%85%8D%2010%20%E4%B8%87%E4%B8%AA%2032%20%E4%BD%8D%E6%95%B4%E6%95%B0%E5%8D%A0%E6%8D%AE%E7%9A%84%E5%86%85%E5%AD%98%E7%A9%BA%E9%97%B4%0Aconst%20sab%20%3D%20new%0ASharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT%20*%0A100000)%3B%0A%2F%2F%20%E5%BB%BA%E7%AB%8B%2032%20%E4%BD%8D%E6%95%B4%E6%95%B0%E8%A7%86%E5%9B%BE%0Aconst%20ia%20%3D%20new%20Int32Array(sab)%3B%20%2F%2F%20ia.length%20%3D%3D%20100000%0A%2F%2F%20%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%B4%A8%E6%95%B0%E7%94%9F%E6%88%90%E5%99%A8%0Aconst%20primes%20%3D%20new%20PrimeGenerator()%3B%0A%2F%2F%20%E5%B0%86%2010%20%E4%B8%87%E4%B8%AA%E8%B4%A8%E6%95%B0%EF%BC%8C%E5%86%99%E5%85%A5%E8%BF%99%E6%AE%B5%E5%86%85%E5%AD%98%E7%A9%BA%E9%97%B4%0Afor%20(%20let%20i%3D0%20%3B%20i%20%3C%20ia.length%20%3B%20i%2B%2B%20)%0A%20%20ia%5Bi%5D%20%3D%20primes.next()%3B%0A%2F%2F%20%E5%90%91%20Worker%20%E7%BA%BF%E7%A8%8B%E5%8F%91%E9%80%81%E8%BF%99%E6%AE%B5%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%0Aw.postMessage(ia)%3B%0A%0A%0A%2F%2F%20Worker%20%E7%BA%BF%E7%A8%8B%0Alet%20ia%3B%0Aonmessage%20%3D%20function%20(ev)%20%7B%0Aia%20%3D%20ev.data%3B%0Aconsole.log(ia.length)%3B%20%2F%2F%20100000%20console.log(ia%5B37%5D)%3B%20%2F%2F%20%E8%BE%93%E5%87%BA%20163%EF%BC%8C%E5%9B%A0%E4%B8%BA%E8%BF%99%E6%98%AF%E7%AC%AC38%E4%B8%AA%E8%B4%A8%E6%95%B0%0A%7D%3B%0A%60%60%60%0A%0A%23%23%23%23%23%20Atomics%20%E5%AF%B9%E8%B1%A1%0A%E5%A4%9A%E7%BA%BF%E7%A8%8B%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%EF%BC%8C%E6%9C%80%E5%A4%A7%E7%9A%84%E9%97%AE%E9%A2%98%E5%B0%B1%E6%98%AF%E5%A6%82%E4%BD%95%E9%98%B2%E6%AD%A2%E4%B8%A4%E4%B8%AA%E7%BA%BF%E7%A8%8B%E5%90%8C%E6%97%B6%E4%BF%AE%E6%94%B9%E6%9F%90%E4%B8%AA%E5%9C%B0%20%E5%9D%80%EF%BC%8C%E6%88%96%E8%80%85%E8%AF%B4%EF%BC%8C%E5%BD%93%E4%B8%80%E4%B8%AA%E7%BA%BF%E7%A8%8B%E4%BF%AE%E6%94%B9%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%E4%BB%A5%E5%90%8E%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%80%E4%B8%AA%E6%9C%BA%E5%88%B6%E8%AE%A9%E5%85%B6%E4%BB%96%E7%BA%BF%E7%A8%8B%E5%90%8C%E6%AD%A5SharedArrayBuffer%20API%20%E6%8F%90%E4%BE%9B%20Atomics%20%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%BF%9D%E8%AF%81%E6%89%80%E6%9C%89%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%E7%9A%84%E6%93%8D%E4%BD%9C%E9%83%BD%E6%98%AF%E2%80%9C%E5%8E%9F%E5%AD%90%E6%80%A7%E2%80%9D%E7%9A%84%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%8F%AF%E4%BB%A5%E5%9C%A8%E6%89%80%E6%9C%89%E7%BA%BF%E7%A8%8B%E5%86%85%E5%90%8C%E6%AD%A5%E3%80%82%0A%0A%E7%8E%B0%E4%BB%A3%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E4%B8%AD%EF%BC%8C%E4%B8%80%E6%9D%A1%E6%99%AE%E9%80%9A%E7%9A%84%E5%91%BD%E4%BB%A4%E8%A2%AB%E7%BC%96%E8%AF%91%E5%99%A8%E5%A4%84%20%E7%90%86%E4%BB%A5%E5%90%8E%EF%BC%8C%E4%BC%9A%E5%8F%98%E6%88%90%E5%A4%9A%E6%9D%A1%E6%9C%BA%E5%99%A8%E6%8C%87%E4%BB%A4%E3%80%82%0A%E4%B8%80%E7%BB%84%E6%9C%BA%E5%99%A8%E6%8C%87%E4%BB%A4%E7%9A%84%E8%BF%90%E8%A1%8C%20%E6%9C%9F%E9%97%B4%EF%BC%8C%E5%8F%AF%E8%83%BD%E4%BC%9A%E6%8F%92%E5%85%A5%E5%85%B6%E4%BB%96%E7%BA%BF%E7%A8%8B%E7%9A%84%E6%8C%87%E4%BB%A4%E3%80%82%0AAtomics%20%E5%AF%B9%E8%B1%A1%E5%B0%B1%E6%98%AF%E4%B8%BA%E4%BA%86%E8%A7%A3%E5%86%B3%E8%BF%99%E4%B8%AA%E9%97%AE%E9%A2%98%E8%80%8C%E6%8F%90%E5%87%BA%EF%BC%8C%E5%AE%83%E5%8F%AF%E4%BB%A5%E4%BF%9D%E8%AF%81%E4%B8%80%E4%B8%AA%E6%93%8D%E4%BD%9C%E6%89%80%20%E5%AF%B9%E5%BA%94%E7%9A%84%E5%A4%9A%E6%9D%A1%E6%9C%BA%E5%99%A8%E6%8C%87%E4%BB%A4%EF%BC%8C%E4%B8%80%E5%AE%9A%E6%98%AF%E4%BD%9C%E4%B8%BA%E4%B8%80%E4%B8%AA%E6%95%B4%E4%BD%93%E8%BF%90%E8%A1%8C%E7%9A%84%EF%BC%8C%E4%B8%AD%E9%97%B4%E4%B8%8D%E4%BC%9A%E8%A2%AB%E6%89%93%E6%96%AD%E3%80%82%E5%AE%83%E6%89%80%E6%B6%89%E5%8F%8A%E7%9A%84%E6%93%8D%E4%BD%9C%E9%83%BD%E5%8F%AF%E4%BB%A5%E7%9C%8B%E4%BD%9C%E6%98%AF%E5%8E%9F%E5%AD%90%E6%80%A7%E7%9A%84%E5%8D%95%E6%93%8D%E4%BD%9C%EF%BC%8C%E8%BF%99%E5%8F%AF%E4%BB%A5%E9%81%BF%E5%85%8D%20%E7%BA%BF%E7%A8%8B%E7%AB%9E%E4%BA%89%EF%BC%8C%E6%8F%90%E9%AB%98%E5%A4%9A%E7%BA%BF%E7%A8%8B%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%E6%97%B6%E7%9A%84%E6%93%8D%E4%BD%9C%E5%AE%89%E5%85%A8%E3%80%82%0A%0A%0A%23%23%23%23%23%23%20(1)Atomics.store()%EF%BC%8CAtomics.load()%0Astore()%20%E6%96%B9%E6%B3%95%E7%94%A8%E6%9D%A5%E5%90%91%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%E5%86%99%E5%85%A5%E6%95%B0%E6%8D%AE%EF%BC%8C%20load()%20%E6%96%B9%E6%B3%95%E7%94%A8%E6%9D%A5%E4%BB%8E%E5%85%B1%E4%BA%AB%E5%86%85%20%E5%AD%98%E8%AF%BB%E5%87%BA%E6%95%B0%E6%8D%AE%E3%80%82%E6%AF%94%E8%B5%B7%E7%9B%B4%E6%8E%A5%E7%9A%84%E8%AF%BB%E5%86%99%E6%93%8D%E4%BD%9C%EF%BC%8C%E5%AE%83%E4%BB%AC%E7%9A%84%E5%A5%BD%E5%A4%84%E6%98%AF%E4%BF%9D%E8%AF%81%E4%BA%86%E8%AF%BB%E5%86%99%E6%93%8D%E4%BD%9C%E7%9A%84%E5%8E%9F%E5%AD%90%E6%80%A7%0A%60%60%60js%0AAtomics.load(array%2C%20index)%0AAtomics.store(array%2C%20index%2C%20value)%0A%2F%2Fstore%20%E6%96%B9%E6%B3%95%E6%8E%A5%E5%8F%97%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%3ASharedBuffer%20%E7%9A%84%E8%A7%86%E5%9B%BE%E3%80%81%E4%BD%8D%E7%BD%AE%E7%B4%A2%E5%BC%95%E5%92%8C%E5%80%BC%EF%BC%8C%E8%BF%94%20%E5%9B%9E%20sharedArray%5Bindex%5D%20%E7%9A%84%E5%80%BC%E3%80%82%20load%20%E6%96%B9%E6%B3%95%E5%8F%AA%E6%8E%A5%E5%8F%97%E4%B8%A4%E4%B8%AA%E5%8F%82%E6%95%B0%3A%20SharedBuffer%20%E7%9A%84%E8%A7%86%E5%9B%BE%E5%92%8C%E4%BD%8D%E7%BD%AE%E7%B4%A2%E5%BC%95%EF%BC%8C%E4%B9%9F%E6%98%AF%E8%BF%94%E5%9B%9E%20sharedArray%5Bindex%5D%20%E7%9A%84%E5%80%BC%E3%80%82%0A%0A%2F%2F%20%E4%B8%BB%E7%BA%BF%E7%A8%8B%20main.js%0Aia%5B42%5D%20%3D%20314159%3B%20%2F%2F%20%E5%8E%9F%E5%85%88%E7%9A%84%E5%80%BC%20191%20Atomics.store(ia%2C%2037%2C%20123456)%3B%20%2F%2F%20%E5%8E%9F%E5%85%88%E7%9A%84%E5%80%BC%E6%98%AF%20163%0A%2F%2F%20Worker%20%E7%BA%BF%E7%A8%8B%20worker.js%0Awhile%20(Atomics.load(ia%2C%2037)%20%3D%3D%20163)%3B%0Aconsole.log(ia%5B37%5D)%3B%20%20%2F%2F%20123456%0Aconsole.log(ia%5B42%5D)%3B%20%20%2F%2F%20314159%0A%60%60%60%0A%0A%23%23%23%23%23%23%20(2)Atomics.wait()%EF%BC%8CAtomics.wake()%0A%E4%BD%BF%E7%94%A8%20while%20%E5%BE%AA%E7%8E%AF%E7%AD%89%E5%BE%85%E4%B8%BB%E7%BA%BF%E7%A8%8B%E7%9A%84%E9%80%9A%E7%9F%A5%EF%BC%8C%E4%B8%8D%E6%98%AF%E5%BE%88%E9%AB%98%E6%95%88%EF%BC%8C%E5%A6%82%E6%9E%9C%E7%94%A8%E5%9C%A8%E4%B8%BB%E7%BA%BF%E7%A8%8B%EF%BC%8C%20%E5%B0%B1%E4%BC%9A%E9%80%A0%E6%88%90%E5%8D%A1%E9%A1%BF%EF%BC%8C%20Atomics%20%E5%AF%B9%E8%B1%A1%E6%8F%90%E4%BE%9B%E4%BA%86%20wait()%20%E5%92%8C%20wake()%20%E4%B8%A4%E4%B8%AA%E6%96%B9%E6%B3%95%E7%94%A8%20%E4%BA%8E%E7%AD%89%E5%BE%85%E9%80%9A%E7%9F%A5%E3%80%82%E8%BF%99%E4%B8%A4%E4%B8%AA%E6%96%B9%E6%B3%95%E7%9B%B8%E5%BD%93%E4%BA%8E%E9%94%81%E5%86%85%E5%AD%98%EF%BC%8C%E5%8D%B3%E5%9C%A8%E4%B8%80%E4%B8%AA%E7%BA%BF%E7%A8%8B%E8%BF%9B%E8%A1%8C%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E8%AE%A9%20%E5%85%B6%E4%BB%96%E7%BA%BF%E7%A8%8B%E4%BC%91%E7%9C%A0(%E5%BB%BA%E7%AB%8B%E9%94%81)%EF%BC%8C%E7%AD%89%E5%88%B0%E6%93%8D%E4%BD%9C%E7%BB%93%E6%9D%9F%EF%BC%8C%E5%86%8D%E5%94%A4%E9%86%92%E9%82%A3%E4%BA%9B%E4%BC%91%E7%9C%A0%E7%9A%84%E7%BA%BF%E7%A8%8B(%E8%A7%A3%20%E9%99%A4%E9%94%81)%E3%80%82%0A%0A%60%60%60js%0A%2F%2FAtomics.wait%20%E7%94%A8%E4%BA%8E%E5%BD%93%20sharedArray%5Bindex%5D%20%E4%B8%8D%E7%AD%89%E4%BA%8E%20value%20%EF%BC%8C%E5%B0%B1%E8%BF%94%20%E5%9B%9E%20not-equal%20%EF%BC%8C%E5%90%A6%E5%88%99%E5%B0%B1%E8%BF%9B%E5%85%A5%E4%BC%91%E7%9C%A0%EF%BC%8C%E5%8F%AA%E6%9C%89%E4%BD%BF%E7%94%A8%20Atomics.wake()%20%E6%88%96%E8%80%85%20time%20%E6%AF%AB%E7%A7%92%E4%BB%A5%E5%90%8E%E6%89%8D%E8%83%BD%E5%94%A4%E9%86%92%E3%80%82%E8%A2%AB%20Atomics.wake()%20%E5%94%A4%E9%86%92%E6%97%B6%EF%BC%8C%E8%BF%94%E5%9B%9E%20ok%20%EF%BC%8C%20%E8%B6%85%E6%97%B6%E5%94%A4%E9%86%92%E6%97%B6%E8%BF%94%E5%9B%9E%20timed-out%20%E3%80%82%0AAtomics.wait(sharedArray%2C%20index%2C%20value%2C%20time)%0A%0A%2F%2FAtomics.wake%20%E7%94%A8%E4%BA%8E%E5%94%A4%E9%86%92%20count%20%E6%95%B0%E7%9B%AE%E5%9C%A8%20sharedArray%5Bindex%5D%20%E4%BD%8D%E7%BD%AE%E4%BC%91%20%E7%9C%A0%E7%9A%84%E7%BA%BF%E7%A8%8B%EF%BC%8C%E8%AE%A9%E5%AE%83%E7%BB%A7%E7%BB%AD%E5%BE%80%E4%B8%8B%E8%BF%90%E8%A1%8C%E3%80%82%0AAtomics.wake(sharedArray%2C%20index%2C%20count)%0A%60%60%60%0A%0A%23%23%23%23%23%23%20(3)%E8%BF%90%E7%AE%97%E6%96%B9%E6%B3%95%0A%E5%85%B1%E4%BA%AB%E5%86%85%E5%AD%98%E4%B8%8A%E9%9D%A2%E7%9A%84%E6%9F%90%E4%BA%9B%E8%BF%90%E7%AE%97%E6%98%AF%E4%B8%8D%E8%83%BD%E8%A2%AB%E6%89%93%E6%96%AD%E7%9A%84%EF%BC%8C%E5%8D%B3%E4%B8%8D%E8%83%BD%E5%9C%A8%E8%BF%90%E7%AE%97%E8%BF%87%E7%A8%8B%E4%B8%AD%EF%BC%8C%E8%AE%A9%E5%85%B6%20%E4%BB%96%E7%BA%BF%E7%A8%8B%E6%94%B9%E5%86%99%E5%86%85%E5%AD%98%E4%B8%8A%E9%9D%A2%E7%9A%84%E5%80%BC%E3%80%82Atomics%20%E5%AF%B9%E8%B1%A1%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E4%BA%9B%E8%BF%90%E7%AE%97%E6%96%B9%E6%B3%95%EF%BC%8C%E9%98%B2%E6%AD%A2%E6%95%B0%20%E6%8D%AE%E8%A2%AB%E6%94%B9%E5%86%99%E3%80%82%0A%60%60%60js%0A%2F%2FAtomics.add%20%E7%94%A8%E4%BA%8E%E5%B0%86%20value%20%E5%8A%A0%E5%88%B0%20sharedArray%5Bindex%5D%20%EF%BC%8C%E8%BF%94%20%E5%9B%9E%20sharedArray%5Bindex%5D%20%E6%97%A7%E7%9A%84%E5%80%BC%E3%80%82%0AAtomics.add(sharedArray%2C%20index%2C%20value)%0A%0A%2F%2FAtomics.sub%20%E7%94%A8%E4%BA%8E%E5%B0%86%20value%20%E4%BB%8E%20sharedArray%5Bindex%5D%20%E5%87%8F%E5%8E%BB%EF%BC%8C%E8%BF%94%20%E5%9B%9E%20sharedArray%5Bindex%5D%20%E6%97%A7%E7%9A%84%E5%80%BC%E3%80%82%0AAtomics.sub(sharedArray%2C%20index%2C%20value)%0A%0A%2F%2FAtomics.and%20%E7%94%A8%E4%BA%8E%E5%B0%86%20value%20%E4%B8%8E%20sharedArray%5Bindex%5D%20%E8%BF%9B%E8%A1%8C%E4%BD%8D%E8%BF%90%20%E7%AE%97%20and%20%EF%BC%8C%E6%94%BE%E5%85%A5%20sharedArray%5Bindex%5D%20%EF%BC%8C%E5%B9%B6%E8%BF%94%E5%9B%9E%E6%97%A7%E7%9A%84%E5%80%BC%E3%80%82%0AAtomics.and(sharedArray%2C%20index%2C%20value)%0A%0A%2F%2FAtomics.or%20%E7%94%A8%E4%BA%8E%E5%B0%86%20value%20%E4%B8%8E%20sharedArray%5Bindex%5D%20%E8%BF%9B%E8%A1%8C%E4%BD%8D%E8%BF%90%20%E7%AE%97%20or%20%EF%BC%8C%E6%94%BE%E5%85%A5%20sharedArray%5Bindex%5D%20%EF%BC%8C%E5%B9%B6%E8%BF%94%E5%9B%9E%E6%97%A7%E7%9A%84%E5%80%BC%E3%80%82%0AAtomics.or(sharedArray%2C%20index%2C%20value)%0A%0A%2F%2FAtomic.xor%20%E7%94%A8%E4%BA%8E%E5%B0%86%20vaule%20%E4%B8%8E%20sharedArray%5Bindex%5D%20%E8%BF%9B%E8%A1%8C%E4%BD%8D%E8%BF%90%20%E7%AE%97%20xor%20%EF%BC%8C%E6%94%BE%E5%85%A5%20sharedArray%5Bindex%5D%20%EF%BC%8C%E5%B9%B6%E8%BF%94%E5%9B%9E%E6%97%A7%E7%9A%84%E5%80%BC%E3%80%82%0AAtomics.xor(sharedArray%2C%20index%2C%20value)%0A%60%60%60%0A%0A%23%23%23%23%23%23%20(4)%E5%85%B6%E4%BB%96%E6%96%B9%E6%B3%95%0A%0AAtomics.compareExchange(sharedArray%2C%20index%2C%20oldval%2C%20newval)%20%3A%E5%A6%82%E6%9E%9C%20sharedArray%5Bindex%5D%20%E7%AD%89%E4%BA%8Eoldval%20%EF%BC%8C%E5%B0%B1%E5%86%99%E5%85%A5newval%20%EF%BC%8C%E8%BF%94%E5%9B%9E%20oldval%20%E3%80%82%0A%0AAtomics.exchange(sharedArray%2C%20index%2C%20value)%20%3A%E8%AE%BE%E7%BD%AE%20sharedArray%5Bindex%5D%20%E7%9A%84%E5%80%BC%EF%BC%8C%E8%BF%94%E5%9B%9E%E6%97%A7%E7%9A%84%E5%80%BC%E3%80%82%0A%0AAtomics.isLockFree(size)%20%3A%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%B8%83%E5%B0%94%E5%80%BC%EF%BC%8C%E8%A1%A8%0A%E7%A4%BA%20Atomics%20%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E5%A4%84%E7%90%86%E6%9F%90%E4%B8%AA%20size%20%E7%9A%84%E5%86%85%E5%AD%98%E9%94%81%E5%AE%9A%E3%80%82%E5%A6%82%E6%9E%9C%E8%BF%94%E5%9B%9E%20false%20%EF%BC%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E5%B0%B1%E9%9C%80%E8%A6%81%E8%87%AA%E5%B7%B1%E6%9D%A5%E5%AE%9E%E7%8E%B0%E9%94%81%E5%AE%9A%E3%80%82</center></body></html>